{% 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.5 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>
            Add an app to the wishlist
        </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]">
                <a
                  href="#"
                  class="inline-block group btn-sm border text-violet-600 border-violet-500 hover:bg-violet-500 hover:text-white"
                >
                        123 <i class="fa fa-star-o inline-block group-hover:hidden" aria-hidden="true"></i>
                            <i class="fa fa-star   hidden group-hover:inline-block" aria-hidden="true"></i>
                </a>
            </td>
        </tr>
        {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}