{% extends "base.html" %}
<!--  -->
{% block content %}
<section class="section container">
  <div class="columns">

    <!-- dashboard menu -->
    <div class="column is-one-quarter">
      {% include 'dashboard/_dash_menu.html' %}
    </div>

    <!-- dashboard content -->
    <div class="column">
      <form method="post">
        {{ form.hidden_tag() }}

        <!-- title -->
        <div class="field">
          <label class="label">Title</label>
          <p class="control">{{ form.title(class="input", type="text", placeholder="Title") }}</p>
          {% for error in form.title.errors %}
            <span class="help" style="color: red;">{{ error }}</span>
          {% endfor %} <br>
        </div>

        <!-- Summary -->
        <div class="field">
            <label class="label">Summary</label>
          <p class="control">{{ form.summary(class="textarea", rows=3, type="textarea", placeholder="Article Summary") }}</p>
          {% for error in form.summary.errors %}
            <span class="help" style="color: red;">{{ error }}</span>
          {% endfor %} <br>
        </div>

        <!-- image url -->
        <div class="field">
          <label class="label">Image URL</label>
          <p class="control">{{ form.img_url(class="input", type="url", placeholder="Image URL") }}</p>
          {% for error in form.img_url.errors %}
            <span class="help" style="color: red;">{{ error }}</span>
          {% endfor %} <br>
        </div>

        <!-- body markdown url -->
        <div class="field">
          <label class="label">Body Markdown URL</label>
          <div class="control">
            {{ form.markdown_url(class="input", type="url", placeholder="Markdown URL Article") }}
          </div>
          {% for error in form.markdown_url.errors %}
            <span class="help" style="color: red;">{{ error }}</span>
          {% endfor %} <br>
        </div>

        <!-- tags -->
        <div class="field">
          <label class="label">Tags</label>
          <p class="control">{{ form.tags(class="input",placeholder="Tags: Ex.: python, flask, django", type="text") }}</p>
          {% for error in form.tags.errors %}
            <span class="help" style="color: red;">{{ error }}</span>
          {% endfor %} <br>
        </div>

        <!-- url -->
        <div class="field">
          <label class="label">Article URL</label>
          <p class="control">{{ form.url(class="input", type="text", placeholder="Article URL") }}</p>
          {% for error in form.url.errors %}
            <span class="help" style="color: red;">{{ error }}</span>
          {% endfor %} <br>
        </div>

        <!-- submit button -->
        <div class="field">
          <p class="control">
            <button class="button">
              Submit
            </button>
          </p>
        </div>
      </form>
    </div>
  </div>
</section>
{% endblock content %}