{% extends "dash/_frame.twig" %}
{#
  if page is in 'edit' mode, set variables
  if not, just make them empty
#}
{% if mode == 'edit' %}
  {% set id = page['id']  %}
  {% set uuid = page['uuid']  %}
  {% set slug = page['slug'] %}
  {% set feature = page['feature']  %}
  {% set _title = page['title']  %}
  {% set tags = page['tags']  %}
  {% set content = page['content']  %}
{% else %}
  {% set id = ''  %}
  {% set uuid = ''  %}
  {% set slug = '' %}
  {% set feature = ''  %}
  {% set title = '' %}
  {% set tags = ''  %}
  {% set content = ''  %}
{% endif %}

{% block title %}
  {{ title }}
{% endblock %}

{% block stylesheets %}
  <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=adfdf">
  {% endblock %}

  {% block mainContent %}
    <div id="post-edit-index" data-index="{{ id }}" data-uuid="{{ uuid }}" data-slug="{{ slug }}">
      <div id="post-edit-index-wrapper">
        <div id="post-feature">
          {% if page['feature'] == null %}
            <div id="featured-image-drop">
              DRAG AND DROP IMAGE OR
              <label for="featured-image-upload"></label>
              CLICK TO CHOSE
            </div>
          {% else %}
            <div id="featured-new-image-btn">
              <button id="new-feature-upload">
                <svg id="new-feature-upload" viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-image-inverted"/></svg>
              </button>
            </div>
            <div id="featured-image-drop">
              <img id="featured-image" src="{{ feature }}"/>
            </div>

          {% endif %}

        </div>
        <div id="post-header">
          <div id="post-header-wrapper" class="columns">
              <div id="post-title" class="column">
                <label>TITLE</label>
                <textarea id="post_title" type="text" name="post_title" class="post-edit" placeholder="TITLE">
                  {{- _title -}}
                </textarea>
                <label>CREATED</label>
                <br/>
                <span id="post-date" type="text">
                  PRETTY DATE
                </span>
              </div>
              <div id="post-meta" class="column">
                <label>TAGS</label>
                <textarea id="post_tags" type="text" name="post_tags" class="form-control" placeholder="tags [comma seperated]">
                  {{- tags -}}
                </textarea>
                <label>OPTIONS</label>
                {% apply spaceless %}
                  {{ include("dash/partials/options.twig") }}
                {% endapply %}                
                <input id="featured-image-upload" type="file" name="featured-image-upload"/>
                <input id="post-image-upload" type="file" name="post-image-upload"/>
              </div>
            </div>
          </div>
          <div id="edit-post">
            {% apply spaceless %}
              {{ include("dash/partials/editor.twig") }}
            {% endapply %}         
            <div id="edit-post-wrapper">
              <pre><code id="edit-post-text" contenteditable="true"> {{- content -}}</code></pre>
            </div>
        </div>
      </div>
    </div>
  {% endblock %}

  {% block javascripts %}
    <script src="/assets/scripts/dash.min.js" type="text/javascript"></script>
  {% endblock %}