{% extends "base.html" %}

{% block body %}

<style>
  .copy-area {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;

    margin-top: 1.5rem;
  }

  .copy-area label {
    font-weight: bold;
    margin-right: 1rem;
  }

  small {
    margin-top: 0.5rem;
  }

  .error {
    color: #bb0000;
    text-align: center;
    font-weight: bold;
  }
</style>

<nav>
  <a href='{% url "index" %}' title='Home'>Home</a>
  <a href='{{ text_file.get_view_url }}' title='View'>View</a>
</nav>

<form class='editor' action='{{ text_file.get_edit_url }}' method='post'>
  {% csrf_token %}
  <div class='edit-key-area'>
    {% if edit_key %}
      <span class='copy-area'>
        <label for='edit-key-display'>Edit key:</label>
        <span id='edit-key-display'>{{ edit_key }}</span>
      </span>
      <small>Save this key in order to edit this file in the future.</small>
      <input id='edit_key' name='edit_key' type='hidden' value='{{ edit_key }}'></input>
    {% else %}
      <span class='field'>
        <label for='edit_key'>Edit key:</label>
        <input id='edit_key' name='edit_key' type='text'></input>
      </span>

      {% if incorrect_key %}
      <span class='error'>You must enter the correct edit key to save your changes.</span>
      {% endif %}
    {% endif %}
  </div>

  <textarea name='text'>{{ text }}</textarea>
  <input type='submit'></input>
</form>

{% endblock %}