{% extends 'base.welcome.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">

  {# Breadcrumbs #}
    {{ breadcrumbs.breadcrumbs([
        {'label': 'Show More Posts', 'url': path('welcome_post_published')},
    ]) }}
  {# \breadcrumbs #}

    <div class="w-full flex justify-end items-end gap-2">
 
    </div class="flex gap-2">

      <div class="w-full md:w-3/4 rounded-lg">
        <div class="p-4">
            <h2 class="text-4xl font-semibold mb-2">{{ post.title() }}</h2>
          <div class="flex gap-2 my-2">
            <span class="bg-yellow-400 text-xs px-2 py-1 rounded-md">debate</span>
            <span class="bg-yellow-400 text-xs px-2 py-1 rounded-md">opinión</span>
            <span class="bg-yellow-400 text-xs px-2 py-1 rounded-md">entretenimiento</span>
          </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('d/m/Y') }}</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>

            {{ form_start(formComment) }}
              {{ form_row(formComment.content, {'label': 'Comment'}) }}
            {{ form_end(formComment) }}

            {% 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 -->
                </footer>
                <p class="text-gray-500 darkkkkk:text-gray-400">{{ comment.getcontent() }}</p>
              </article>
            {% endfor %}
            
        </div>
      </div>

      <div class="w-3/4 grid grid-cols-2 gap-3">
        {% for post in posts %}
            <a href="{{ path('blog_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>

      {# Breadcrumbs #}
    {{ breadcrumbs.breadcrumbs([
        {'label': 'Show More Posts', 'url': path('welcome_post_published')},
    ]) }}
  {# \breadcrumbs #}
</div>

{% endblock %}