{% extends "base.html" %}

{% block body %}

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

<style>
  .copy-area {
    display: flex;
    flex-direction: row;
    align-items: 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>

{% 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>
{% endif %}

<form class='editor' action='{{ text_file.get_edit_url }}' method='post'>
  {% csrf_token %}
  {% if edit_key %}
    <input id='edit_key' name='edit_key' type='hidden' value='{{ edit_key }}'></input>
  {% else %}
    <span>
      <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 %}
  <textarea name='text'>{{ text }}</textarea>
  <input type='submit'></input>
</form>

{% endblock %}