{% extends 'base.html.twig' %}

{% block title %}Detalles del post{% endblock %}

{% block content %}

{% import 'breadcrumbs.html.twig' as breadcrumbs %}
{% import 'comments.html.twig' as comments %}

<style>
  p {
    line-height: 34px; 
  }
</style>

<div class="max-w-4xl mx-auto p-3 flex gap-2 flex-col justify-center items-center">

  <div class="flex w-full">
  {# Breadcrumbs #}
    {{ breadcrumbs.breadcrumbs([
        {'label': 'Home', 'url': path('app_home')},
        {'label': 'Posts', 'url': path('post_index')},
        {'label': "Show" },
        {'label':  post.getId() }
    ]) }}
  {# \breadcrumbs #}
      <div class="w-full flex justify-end items-end gap-2">
      <a href="{{ path('post_edit', {'id': post.getId()}) }}" class="bg-blue-500 hover:bg-blue-700 text-white text-sm py-1 px-2 rounded">
          <i class="fa-solid fa-pen-to-square"></i>
          Edit Post
      </a>
    
      <form id="delete-post-form" action="{{ path('post_delete', {'id': post.getId()}) }}" method="post" style="display: inline;">
        <button type="submit" class=" text-red-700 text-sm py-1 px-2 rounded">
          <i class="fa-solid fa-trash"></i>
            Delete Post
        </button>
      </form>

    </div class="flex gap-2">
</div>


      <div class="w-3/4 bg-white rounded-lg">
        <div class="p-4">
            <h2 class="text-4xl font-semibold mb-2">{{ post.title() }}</h2>
          <div class="flex gap-2 flex-wrap my-2">
            {% for tag in post.getTags() %}
                  <div>
                  <span class="bg-yellow-400 text-xs px-2 py-1 rounded-md w-full" style="white-space: nowrap;">{{ tag }}</span>
                  </div>
            {% endfor %}
          </div>
            
            <img src="{{ post.getUrl() }}" class="h-96 w-full object-cover"></img>
            <div class="w-full flex justify-end gap-2">
              <p class="text-xs text-gray-500 mt-1">Fecha de Publicación: {{ post.creationDate|date('Y/m/d H:m:s') }}</p>
              <span class="text-xs bg-red-500 text-white px-2 py-1">{{ post.type() }}</span>
            </div>

            <div class="ck-content">{{ post.getcontent() | raw }}</div>

            <div class="flex justify-between items-center mb-6">
              <h2 class="text-lg lg:text-2xl font-bold text-gray-900 darkkkkk:text-white">Discussion ({{post.getComments()|length}})</h2>
            </div>

            {% for comment in post.getComments() %}
              <article class="p-6 text-base bg-white rounded-lg darkkkkk:bg-gray-900">
                <footer class="flex justify-between items-center mb-2">
                    <div class="flex items-center">
                        <p class="inline-flex items-center mr-3 text-sm text-gray-900 darkkkkk:text-white font-semibold"><img
                          class="mr-2 w-6 h-6 rounded-full"
                          src="https://flowbite.com/docs/images/people/profile-picture-2.jpg"
                          alt="Desconocido">Desconocido
                        </p>
                        <p class="text-sm text-gray-600 darkkkkk:text-gray-400"><time pubdate datetime="2022-02-08" title="February 8th, 2022">Feb. 8, 2022</time></p>
                    </div>
                    <button id="dropdownComment1Button" data-dropdown-toggle="dropdownComment1"
                        class="inline-flex items-center p-2 text-sm font-medium text-center text-gray-500 darkkkkk:text-gray-400 bg-white rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-50 darkkkkk:bg-gray-900 darkkkkk:hover:bg-gray-700 darkkkkk:focus:ring-gray-600"
                        type="button">
                        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 3">
                            <path d="M2 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm6.041 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM14 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z"/>
                        </svg>
                        <span class="sr-only">Comment settings</span>
                    </button>
                    <!-- Dropdown menu -->
                    <div id="dropdownComment2"
                        class="hidden z-10 w-36 bg-white rounded divide-y divide-gray-100 shadow darkkkkk:bg-gray-700 darkkkkk:divide-gray-600">
                        <ul class="py-1 text-sm text-gray-700 darkkkkk:text-gray-200"
                            aria-labelledby="dropdownMenuIconHorizontalButton">
                            <li>
                                <a href="#"
                                    class="block py-2 px-4 hover:bg-gray-100 darkkkkk:hover:bg-gray-600 darkkkkk:hover:text-white">Edit</a>
                            </li>
                            <li>
                                <a href="#"
                                    class="block py-2 px-4 hover:bg-gray-100 darkkkkk:hover:bg-gray-600 darkkkkk:hover:text-white">Remove</a>
                            </li>
                            <li>
                                <a href="#"
                                    class="block py-2 px-4 hover:bg-gray-100 darkkkkk:hover:bg-gray-600 darkkkkk:hover:text-white">Report</a>
                            </li>
                        </ul>
                    </div>
                </footer>
                <p class="text-gray-500 darkkkkk:text-gray-400">{{ comment.getcontent() }}</p>
                <div class="flex gap-1">
                  <button class="text-blue-500 hover:text-blue-700 bg-gray-200 text-sm py-1 px-2 rounded"><i class="fa-solid fa-check"></i></button>
                  <button class="text-red-500 hover:text-red-700 bg-gray-200 text-sm py-1 px-2 rounded"><i class="fa-solid fa-trash"></i></button>
                  <button class="text-yellow-500 hover:text-yellow-700 bg-gray-200 text-sm py-1 px-2 rounded"><i class="fa-solid fa-lock"></i></button>
                </div>
              </article>
            {% endfor %}
        </div>
      </div>

      <div class="w-3/4 grid grid-cols-2 gap-3">
        {% for post in posts %}
            <a href="{{ path('post_show', {'slug': post.getSlug()}) }}">
              <div class="bg-white rounded-md p-2 h-full hover:cursor-pointer hover:shadow-md">
                <img src="{{ post.getUrl() }}" class="h-44 w-full object-cover"></img>
                <p class="text-xs text-gray-400 mt-1">Fecha de Publicación: {{ post.creationDate|date('d/m/Y') }}</p>
                <h2 class="font-semibold text-xl mb-3">{{ post.title }}</h2>
            </div>
            </a>
        {% endfor %}
      </div>

    </div>
</div>


{% endblock %}