{% extends "layout.njk" %}
{% block content %}
  <form class="ajax-handling">
    <div class="flex">
      <label for="search-dropdown" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Enter Keywords</label>
      <button
        id="dropdown-button"
        data-dropdown-toggle="dropdown"
        class="disable flex-shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-900
          bg-gray-100 border border-gray-300 rounded-l-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100
          dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700 dark:text-white dark:border-gray-600"
        type="button">All categories
        <svg aria-hidden="true" class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path
            fill-rule="evenodd"
            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
            clip-rule="evenodd"></path>
        </svg>
      </button>
      <div
        id="dropdown"
        class="z-10 hidden bg-white divide-y divide-gray-100 rounded shadow w-44 dark:bg-gray-700"
        data-popper-reference-hidden=""
        data-popper-escaped=""
        data-popper-placement="top"
        style="position: absolute; inset: auto auto 0px 0px; margin: 0px; transform: translate3d(897px, 5637px, 0px);">
        <ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdown-button">
          <li>
            <button
              type="button"
              class="inline-flex w-full px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Tags</button>
          </li>
          <li>
            <button
              type="button"
              class="inline-flex w-full px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Category</button>
          </li>
        </ul>
      </div>
      <div class="relative w-full">
        <input
          type="search"
          id="search-dropdown"
          class="block p-2.5 w-full z-20 text-sm text-gray-900 bg-gray-50 rounded-r-lg border-l-gray-50 border-l-2 border
            border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-l-gray-700 dark:border-gray-600
            dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500"
          placeholder="Search Mockups, Logos, Design Templates..."
          required>
          <button
            type="submit"
            id="search-dropdown-submit"
            class="absolute top-0 right-0 p-2.5 text-sm font-medium text-white bg-blue-700 rounded-r-lg border border-blue-700
              hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700
              dark:focus:ring-blue-800">
            <svg
              aria-hidden="true"
              class="w-5 h-5"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
            </svg>
            <span class="sr-only">Search</span>
          </button>
        </div>
      </div>
    </form>
    <div>
      <ul class="divide-y divide-gray-200 dark:divide-gray-700">
        {% for post in posts %}
          <li class="py-3 sm:py-4" aria-find="post">
            <div class="flex items-center space-x-4">
              <div class="flex-shrink-0">
                <img class="w-8 h-8 rounded-full" src="{{ post.thumbnail or post.cover or post.photos[0] or "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/2048px-No_image_available.svg.png" }}" alt="Thumbnail - {{ post.title }}"></div>
                <div class="flex-1 min-w-0">
                  <p class="text-sm font-medium text-gray-900 truncate dark:text-white" aria-find="title">
                    {{ post.title or "No title" |safe }}
                  </p>
                  <div class="text-sm text-gray-500 truncate dark:text-gray-400 grid gap-px grid-cols-3">
                    <div>
                      <i class="fa-light fa-user w-2.5"></i>
                      {{ getAuthorName(post.author) }}</div>
                    <div>
                      <i class="fa-light fa-chart-gantt w-2.5"></i>
                      <span>total words {{ post.wordcount }}</span>
                    </div>
                    <div aria-find="categories">
                      <i class="fa-light fa-folder-open"></i>
                      {% if post.categories and post.categories.length %}
                        <span>{{ post.categories }}</span>
                      {% else %}
                        <span>uncategorized</span>
                      {% endif %}
                    </div>
                    <div aria-find="tags">
                      <i class="fa-light fa-tag"></i>
                      {% if post.tags and post.tags.length %}
                        <span>{{ post.tags }}</span>
                      {% else %}
                        <span>-</span>
                      {% endif %}
                    </div>
                    <div>
                      <i class="fa-light fa-folder-open w-2.5"></i>
                      <span>{{ post.relative_source }}</span>
                    </div>
                  </div>
                </div>
                <div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
                  <div class="inline-flex rounded-md shadow-sm">
                    <a
                      href="/post/edit/{{ post.id }}"
                      class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100
                        hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600
                        dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white">
                      Edit
                    </a>
                    <a
                      href="/post/settings/{{ post.id }}"
                      class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100
                        hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600
                        dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white">
                      Settings
                    </a>
                  </div>
                </div>
              </div>
            </li>
          {% endfor %}
        </ul>
      </div>
    {% endblock %}
{% block script %}
  <script src="/js/post/index.js" type="text/javascript" charset="utf-8"></script>
{% endblock script %}