<section id="permission_denied">
  <editable-form id="permission_denied-editable" class="stack-large">
    <form
      id="form-permission_denied"
      hx-post="{{ form.post_url }}"
      hx-target="#permission_denied"
      hx-swap="outerHTML"
      enctype="multipart/form-data"
    >
      <input type="hidden" data-field="title" name="title" value="{{ form.title.value }}">
      <input type="hidden" data-field="sub_title" name="sub_title" value="{{ form.sub_title.value }}">
      <input type="hidden" data-field="email" name="email" value="{{ form.email.value }}">
      <input type="hidden" data-field="text" name="text" value="{{ form.text.value }}">
      <input type="file" id="avatar-img" style="display:none;" name="avatar_img" accept="image/*"/>
      <input type="hidden" data-field="avatar_alt" name="avatar_alt" value="{{ form.avatar_alt.value }}">
    </form>
    <header>
      <div>
        <h1 contenteditable="true" data-field="title">{{ form.title.value }}</h1>
      </div>
      {% for error in form.title.errors %}
        <p class="error">{{ error|escape }}</p>
      {% endfor %}
    </header>
    <div class="stack">
      <div id="avatar-container" class="avatar-container cover-avatar-edit-container">
        {% if form.avatar_img.value %}
          <div class="stack">
            <img class="avatar cover-avatar-image editable-avatar" data-field="avatar_img"
                 src="{{ form.avatar_img_url }}"
                 alt="{{ form.avatar_alt.value }}">
            <p contenteditable="true" data-field="avatar_alt" style="max-width: 110px">{{ form.avatar_alt.value }}</p>
            {% for error in form.avatar_alt.errors %}
              <p class="error">{{ error|escape }}</p>
            {% endfor %}
          </div>
        {% else %}
          <div class="stack">
            <svg class="avatar editable-avatar" data-field="avatar_img">
              <use href="#avatar"></use>
            </svg>
            {% for error in form.avatar_img.errors %}
              <p class="error">{{ error|escape }}</p>
            {% endfor %}
            <p contenteditable="true" data-field="avatar_alt">{{ form.avatar_alt.value }}</p>
            {% for error in form.avatar_alt.errors %}
              <p class="error">{{ error|escape }}</p>
            {% endfor %}
          </div>
        {% endif %}
      </div>
      <h2 contenteditable="true" data-field="sub_title">{{ form.sub_title.value }}</h2>
      {% for error in form.sub_title.errors %}
        <p class="error">{{ error|escape }}</p>
      {% endfor %}
      <div>
        Email: <span contenteditable="true" data-field="email">{{ form.email.value }}</span>
      </div>
      {% for error in form.email.errors %}
        <p class="error">{{ error|escape }}</p>
      {% endfor %}
      <p contenteditable="true" data-field="text">{{ form.text.value }}</p>
      {% for error in form.text.errors %}
        <p class="error">{{ error|escape }}</p>
      {% endfor %}
    </div>
    <div>
      <button id="submit-cover" type="submit">
        <svg class="edit-icon-small">
          <use href="#ok"></use>
        </svg>
      </button>
    </div>
    </div>
  </editable-form>
</section>