{% extends 'blog/partials/base.html' %} {% block content %}
{% if post %}
<h2>Edit Post: {{ post.title }}</h2>
{% else %}
<h2>Create New Post</h2>
{% endif %}
<p>This page allows you to create metadata for a new post. You can add the actual content of the post in the next step.</p>
<style>
  td {
    padding: 10px 0px;
  }
</style>
{% for message in messages %}
    {% if 'new_post_message' in message.tags %}
      <p class="message {{message.tags}}">{{message.message}}</p>
    {% endif %}
{% endfor %}
<form action="{% url 'blog-admin:new-post' %}" method="post" enctype="multipart/form-data">
  {% csrf_token %}
  {% if post %}
  <input type="hidden" name="post_id" value="{{ post.id }}" />
  {% endif %}
  <table style="table-layout: fixed;">
    <tr>
      <td style="font-weight: bold; padding-right: 20px;">Title <sup>*</sup></td>
      <td><input type="text" name="title" id="title" placeholder="Enter an amazing title" {% if post %} value="{{ post.title }}" {% endif %} {% if return_object %} value="{{ return_object.title_value }}" {% endif %} required/></td>
    </tr>
    <tr>
      <td style="font-weight: bold; padding-right: 20px;">Slug</td>
      <td>
        <span id="ag_slug" style="display: inline-block;">Auto generated.</span>
        <input type="text" id="slug" name="slug" placeholder="Enter a custom slug" style="display: none;" {% if post %} value="{{ post.slug }}" {% endif %} {% if return_object %} value="{{ return_object.slug_value }}" {% endif %} />
        <a style="cursor: pointer" id="slug_btn" onclick="customSlugToggle()">Use custom slug?</a>
      </td>
    </tr>
    {% if post %}
    <tr>
      <td style="font-weight: bold; padding-right: 20px;">Cover Image</td>
      <td>
          <img src="{% url 'ignis:post_image' '300' post.id %}.gif" alt="Cover Image" style="width: 300px; margin: 0 auto; display: block;">
      </td>
    </tr>
    {% endif %}
    <tr>
      <td style="font-weight: bold; padding-right: 20px;">
        {% if post %}
          New Cover Image
        {% else %}
          Cover Image <sup>*</sup>
        {% endif %}
      </td>
      <td>
        <input style="padding-left: 0px;" type="file" name="post_image" {% if not post %}required{% endif %} {% if return_object %} value="{{ return_object.post_image_value }}" {% endif %} accept="image/png, image/gif, image/jpeg" />
      </td>
    </tr>
    <tr>
      <td style="font-weight: bold; padding-right: 20px;">Tags <sup>*</sup></td>
      <td>
        <select name="tags" multiple="multiple" required>
          {% for tag in all_tags %}
            <option value="{{ tag }}" {% if post and tag in post.tags %} selected {% endif %} {% if return_object and tag in return_object.tags_value %} selected {% endif %}>{{ tag }}</option>
          {% endfor %}
        </select>
      </td>
    </tr>
    <tr>
      <td style="font-weight: bold; padding-right: 20px;">Additional Tags</td>
      <td>
        <input type="text" name="additional_tags" placeholder="Comma-Separated Additional Tags" {% if return_object %} value="{{ return_object.additional_tags_value }}" {% endif %} />
      </td>
    <tr>
      <td style="font-weight: bold; padding-right: 20px;">Category <sup>*</sup></td>
      <td>
        <select name="category">
          {% for category in categories %}
            <option value="{{ category.id }}" {% if post and post.category == category.id %} selected {% endif %} {% if return_object and return_object.category_value == category.id %} selected {% endif %}>{{ category.name }}</option>
          {% endfor %}
        </select>
      </td>
    </tr>
    <tr>
      <td style="font-weight: bold; padding-right: 20px;">Post Date</td>
      <td>
        {% comment %} {{ post.post_date|date:"Y-m-d" }} {% endcomment %}
        <input type="date" name="post_date" {% if post %} value="{{ post.post_date|date:'Y-m-d' }}" {% endif %} {% if return_object %} value="{{ return_object.post_date_value }}" {% endif %}/>
      </td>
  </table>
  <br>
  <input type="submit" class="button button-special" {% if post %} value="Update Post" {% else %} value="Create Post" {% endif %} />
</form>
<script>
  String.prototype.slugify = function (separator = "-") {
    return this
      .toString()
      .normalize('NFD')                   // split an accented letter in the base letter and the acent
      .replace(/[\u0300-\u036f]/g, '')   // remove all previously split accents
      .toLowerCase()
      .trim()
      .replace(/[^a-z0-9 ]/g, '')   // remove all chars not letters, numbers and spaces (to be replaced)
      .replace(/\s+/g, separator);
  };

  function customSlugToggle() {
    var ag_slug = document.getElementById('ag_slug');
    var slug = document.getElementById('slug');
    var slug_btn = document.getElementById('slug_btn');
    if (ag_slug.style.display == 'inline-block') {
      ag_slug.style.display = 'none';
      slug.style.display = 'inline-block';
      slug_btn.innerHTML = 'Use auto generated slug?';
    } else {
      ag_slug.style.display = 'inline-block';
      slug.style.display = 'none';
      slug_btn.innerHTML = 'Use custom slug?';
      var title = document.getElementById('title');
      slug.value = title.value.slugify();
    }
  }
</script>

{% endblock %}