apps/store/templates/wishlist.html

{% extends "base.html" %}
{% block main %}
<div class="mt-5 text-center">
    <h2 class="text-2xl font-bold text-gray-900">
        {{ _("Application Wishlist") }} 
    </h2>
</div>

<div class="max-w-screen-md mx-auto mt-3 mb-3">
    <div class="flex flex-row">
        <div class="px-2 inline-block relative basis-2/3 text-gray-700">
            <label for="search" class="sr-only"> {{ _("Search") }} </label>

            <input 
                type="text"
                id="search"
                placeholder="{{ _('Search for...') }}"
                class="w-full rounded-md border-gray-200 shadow-sm sm:text-sm py-2 pe-10"
            />

            <span class="absolute inset-y-0 end-0 grid w-10 place-content-center pr-4">
                <i class="fa fa-search" aria-hidden="true"></i>
            </span>
        </div>

        <a class="btn btn-primary-outline" href="{{ url_for('add_to_wishlist') }}">
            <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
            {{ _("Suggest an app") }}
        </a>
        </div>
    </div>

</div>

<div class="overflow-x-auto max-w-screen-lg mx-auto pt-5">
  <table class="min-w-full divide-y-2 divide-gray-200 bg-white text-sm">
    <thead>
      <tr>
        <th class="whitespace-nowrap px-4 py-2 font-medium text-gray-900">
            {{ _("Name") }} 
        </th>
        <th class="whitespace-nowrap px-4 py-2 font-medium text-gray-900">
            {{ _("Description") }} 
        </th>
        <th class="py-2"></th>
        <th class="py-2"></th>
        <th class="whitespace-nowrap px-4 py-2 font-medium text-gray-900 max-w-[5em]">{{ _("Popularity") }}</th>
      </tr>
    </thead>

    <tbody class="divide-y divide-gray-200">
        {% for app, infos in wishlist.items() %}
        <tr>
            <td class="px-4 py-2 font-bold text-gray-900 max-w-[10em]">
                {{ infos['name'] }}
            </td>
            <td class="px-4 py-2 text-gray-700 max-w-md">{{ infos['description'] }}</td>
            <td class="py-2">
              {% if infos['website'] %}
              <a
                href="{{ infos['website'] }}"
                class="inline-block"
              >
                  <i class="fa fa-globe rounded-md border px-3 py-2 hover:bg-gray-100" aria-hidden="true"></i>
              </a>
              {% endif %}
            </td>
            <td class="py-2">
              {% if infos['upstream'] %}
              <a
                href="{{ infos['upstream'] }}"
                class="inline-block"
              >
                  <i class="fa fa-code rounded-md border px-3 py-2 hover:bg-gray-100" aria-hidden="true"></i>
              </a>
              {% endif %}
            </td>
            <td class="text-center max-w-[5em]">
                {% set this_app_stars = stars.get(app, {})|length %}
                {% if user %}
                    {% set user_starred_this_app = user['id'] in stars.get(app, {}) %}
                {% else %}
                    {% set user_starred_this_app = False %}
                {% endif %}
                <a
                  href="{{ url_for('star_app', app_id=app, action="unstar" if user_starred_this_app else "star") }}"
                  class="inline-block group btn-sm border text-violet-600 border-violet-500 hover:bg-violet-500 hover:text-white"
                >
                    {% if not user_starred_this_app %}
                        <span class="inline-block {% if user %}group-hover:hidden{% endif %}">{{ this_app_stars }}</span>
                        <span class="hidden {% if user %}group-hover:inline-block{% endif %}">{{ this_app_stars+1 }}</span>
                        <i class="fa fa-star-o inline-block {% if user %}group-hover:hidden{% endif %}" aria-hidden="true"></i>
                        <i class="fa fa-star   hidden {% if user %}group-hover:inline-block{% endif %}" aria-hidden="true"></i>
                    {% else %}
                        <span class="inline-block group-hover:hidden">{{ this_app_stars }}</span>
                        <span class="hidden group-hover:inline-block">{{ this_app_stars-1 }}</span>
                        <i class="fa fa-star   inline-block group-hover:hidden" aria-hidden="true"></i>
                        <i class="fa fa-star-o hidden group-hover:inline-block" aria-hidden="true"></i>
                    {% endif %}
                </a>
            </td>
        </tr>
        {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}