{% 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 action="" method="POST">
        {{ form.hidden_tag() }}

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

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

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

        <!-- social media -->
        <div class="field is-horizontal">
          <div class="field-body">

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

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

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

        <!-- about -->
        <div class="field">
          <label class="label">{{ form.about_me.label }}</label>
          <div class="control">
            {{ form.about_me(class="textarea", type="textarea", rows=5, placeholder="Markdown Enabled") }}
          </div><br>
        </div>

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