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

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

{% block content %}

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

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

  {# Breadcrumbs #}
    {{ breadcrumbs.breadcrumbs([
        {'label': 'Home', 'url': path('app_home')},
        {'label': 'Posts', 'url': path('post_index')},
        {'label': 'Create'}
    ]) }}
  {# \breadcrumbs #}
  </div>
  <div class="w-full bg-white rounded-lg p-3 flex flex-col gap-2">
  {# <p>{{ post is defined ? 'Edit' : 'Create' }} Post</p> #}


      {% if post is defined %}
        <form action="{{ path('post_update', {'id': post.getId()}) }}" method="POST" class="w-full flex flex-col gap-2">
        <input type="hidden" name="_method" value="PUT">
        {% else %}
            <form action="{{ path('post_store') }}" method="POST" class="w-full flex flex-col gap-2">
        {% endif %}

              <div>
      {% if post is defined %}
      {# <button type="submit" class="mt-3 bg-blue-500 hover:bg-blue-700 text-white text-sm py-1 px-2 rounded">
      <i class="fa-regular fa-paper-plane"></i>
      Enviar
      </button> #}
      
      {% else %}
          <button type="submit" class="mt-3 bg-blue-500 hover:bg-blue-700 text-white text-sm py-1 px-2 rounded">Continuar</button>
      {% endif %}
      </div>
      
      <div>
        <label class="block text-gray-700 text-sm font-bold" for="title">Title</label>
        <input name="title" id="title" type="text" value="{{ post.title ?? '' }}" placeholder="Title" class=" appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></input>
      </div>
      

      {% if post is defined %}
       <div>
        <textarea name="content" id="content" placeholder="Content" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">{{ post.content ?? '' }}</textarea>
      </div>
      {% else %}

      {% endif %}

      <hr>
      <div class="w-full flex gap-2">
        <div class="w-full">
        <label class="block text-gray-700 text-sm font-bold" for="username">
          Status
        </label>
        <select name="status" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
          <option value="draft" selected>Draft</option>
          <option value="published">Published</option>
          <option value="scheduled">Scheduled</option>
          <option value="locked">Locked</option>
          <option value="archived">Archived</option>
          <option value="hidden">Hidden</option>
        </select>
      </div>
      <div class="w-full">
        <label class="block text-gray-700 text-sm font-bold" for="username">
          Category
        </label>
        <select name="category" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
          <option value="select" selected>select</option>
              {% for category in categories %}
                <option value="{{ category.getId()  }}">{{ category.getName() }}</option>
              {% endfor %}
        </select>
      </div>
      </div>
      <div>
        <label class="block text-gray-700 text-sm font-bold" for="description">Descriptión</label>
        <textarea name="description" id="description" type="text" placeholder="Description" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">{{ post.description ?? '' }}</textarea>
      </div>
      <div>
        <label class="block text-gray-700 text-sm font-bold" for="tag">Tags (tag1, tag2, tag3, ...)</label>
         {% if post is defined %}
          <input name="tag" id="tag" type="text" value="{{ post.getTags()|join(', ') }}" placeholder="Separe por coma (,) cada Tag" class=" appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></input>
        {% else %}
          <input name="tag" id="tag" type="text" placeholder="Separe por coma (,) cada Tag" class=" appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></input>
        {% endif %}

        {# <input name="tag" id="tag" type="text" value="{{ post.getTags()|join(', ') ?? '' }}" placeholder="Separe por coma (,) cada Tag" class=" appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></input> #}
      </div>
      <div>
        <label class="block text-gray-700 text-sm font-bold" for="url">Url Imagen principal</label>
        <input name="url" id="url" type="text" value="{{ post.url ?? '' }}" placeholder="Url" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></input>
      </div>

      <div>
      {% if post is defined %}
      <button type="submit" class="mt-3 bg-blue-500 hover:bg-blue-700 text-white text-sm py-1 px-2 rounded">
      <i class="fa-regular fa-paper-plane"></i> Enviar</button>
      
      {% else %}
          <button type="submit" class="mt-3 bg-blue-500 hover:bg-blue-700 text-white text-sm py-1 px-2 rounded">Continuar</button>
      {% endif %}
      </div>

    </form>

  </div>
</div>

<script>
  {# ClassicEditor
    .create( document.querySelector( '#content' ) )
    .then( content => {
            console.log( content );
    } )
    .catch( error => {
            console.error( error );
    } ); #}

  ClassicEditor
    .create( document.querySelector( '#content' ), {
        codeBlock: {
            languages: [
                { language: 'css', label: 'CSS' },
                { language: 'html', label: 'HTML' }
            ]
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

</script>


{% endblock %}