{% set show_attach_button = allow_add_attachment %}
<section class="page-meta">
<section id="page-attachments">

  <h3><i aria-hidden="true" class="icon-paper-clip"></i>{{ _('Attachments') }} <a href="{{ devmo_url('Project:MDN/Contributing/Editor_guide/Editing#The_attachments_box') }}"><i aria-hidden="true" title="{{ _('Learn how to use Attachments') }}" class="icon-question-sign editor-help-icon"></i></a></h3>

  {% if show_attach_button and attachment_form and attachment_data|length %}
  <p class="add">
      <button type="button" id="page-attachments-button" class="neutral">Attach Files<i aria-hidden="true" class="icon-paper-clip"></i></button>
  </p>
  {% endif %}

  <p id="page-attachments-no-message" class="{% if attachment_data|length %}hidden{% endif %}">
    {{ _('This document has no attachments. Images can be attached, and then embedded in the article.') }}
    {% if show_attach_button and attachment_form and not attachment_data|length %}
      <button id="page-attachments-button" class="neutral">Attach Files<i aria-hidden="true" class="icon-paper-clip"></i></button>
    {% endif %}
  </p>

  <script>
    mdn.wiki.attachments = {{ (attachment_data_json | safe) or '[]' }};
  </script>


    <table cellpadding="0" cellspacing="0" id="page-attachments-table" class="{% if not attachment_data|length %}hidden{% endif %}">
      <thead>
        <th>{{ _('File') }}</th>
        <th>{{ _('Size') }}</th>
        <th>{{ _('Date') }}</th>
        <th>{{ _('Attached by') }}</th>
      </thead>
      <tbody>
        {% for attachment in attachment_data %}
          {{ attachment.html }}
        {% endfor %}
      </tbody>
    </table>


  {% if show_attach_button and attachment_form %}
  <form method="post" action="{{ url('wiki.new_attachment') }}" id="page-attachments-form" enctype="multipart/form-data">
    {{ csrf() }}
    <table cellpadding="0" cellspacing="0" id="page-attachments-new-table" class="hidden">
      <thead>
        <th class="hidden page-attachment-actions-cell">&nbsp;</th>
        <th>{{ _('File') }}</th>
        <th>{{ _('Title') }}</th>
        <th>{{ _('Description') }}</th>
        <th>{{ _('Comments') }}</th>
      </thead>
      <tbody>
        <tr>
          <td class="hidden page-attachment-actions-cell"><a href="javascript:;" class="hidden delete-attachment">{{ _('Delete') }}</a></td>
          <td class="page-attachment-actions-file-cell">{{ attachment_form.file | safe }}</td>
          <td>{{ attachment_form.title | safe }}</td>
          <td>{{ attachment_form.description | safe }}</td>
          <td>{{ attachment_form.comment | safe }}</td>
        </tr>
        <tr>
          <td colspan="4">
            <input type="submit" name="submit" value="Upload" />

            {% set spinner_path = '/media/redesign/img/upload-spinner.gif' %}
            <img src="{{ spinner_path }}" id="page-attachments-spinner" alt="{{ _('Uploading') }}" />
          </td>
        </tr>
      </tbody>
    </table>
    <iframe id="page-attachments-upload-target" name="page-attachments-upload-target"></iframe>
  </form>
  {% endif %}
</section>
</section>