<div id="ar-attachments"
     class="attachments"
     i18n:domain="senaite.core">

  <button type="button"
          class="btn btn-light dropdown-toggle mb-3"
          data-toggle="collapse"
          data-target="#ar-attachments-panel">
    <i class="fas fa-paperclip" aria-hidden="true"/>
    <span i18n:translate="">Attachments</span>
  </button>

  <div id="ar-attachments-panel"
       class="collapse card p-2 mb-3 bg-light"
       tal:define="attachments_view python:view.get_attachments_view()">

    <script type="text/javascript">
    jQuery(document).ready(function($) {
        $("#attachments_update_table tbody").sortable();
    });
    </script>

    <style type="text/css">
    #attachments_update {
        margin-bottom: 2em;
    }
    .formHelp {
        margin-bottom: 1em;
    }
    #attachments_update_table tr {
        cursor: ns-resize;
    }
    .attachment-delete {
        text-align: center;
    }
    </style>

    <!-- Attachments Viewlet -->
    <div class="panel-body"
         tal:define="can_add attachments_view/can_add_attachments;
                     can_edit attachments_view/can_edit_attachments;
                     can_delete attachments_view/can_delete_attachments;
                     attachments attachments_view/get_sorted_attachments;
                     attachment_types attachments_view/get_attachment_types;
                     report_options attachments_view/get_attachment_report_options">

      <!-- Attachments List -->
      <div id="attachments_update" class="ar_attachments_list">

        <!-- Update Attachment Form -->
        <form action="attachments_view/update"
              name="attachments_update_form"
              enctype="multipart/form-data"
              tal:attributes="action string:${context/absolute_url}/@@attachments_view/update"
              tal:condition="attachments"
              method="POST">

          <!-- POST marker and Authenticator -->
          <input type="hidden" name="submitted" value="1"/>
          <span tal:replace="structure context/@@authenticator/authenticator"/>

          <table id="attachments_update_table">
            <thead>
              <tr>
                <th class="pr-3" i18n:translate="">Name</th>
                <th class="pr-3" i18n:translate="">Type</th>
                <th class="pr-3" i18n:translate="">Size</th>
                <th class="pr-3" i18n:translate="">Analysis</th>
                <th class="pr-3" i18n:translate="">Keywords</th>
                <th class="pr-3" i18n:translate="">Report Option</th>
                <!-- Please do not move this column to be the first, because the
                      :records converter will somehow offset the True/False value of
                      the checkbox by -1 (the record before will be deleted) -->
                <th class="pr-3" tal:condition="can_delete">Delete</th>
              </tr>
            </thead>
            <tbody>
              <tr tal:repeat="attachment attachments">

                <td class="attachment-link">
                  <!-- Icon and Attachment download link -->
                  <i class="fa fa-paperclip" aria-hidden="true"/>
                  <a title="Click to download"
                      tal:attributes="href string:${attachment/absolute_url}/at_download/AttachmentFile"
                      tal:content="attachment/name">name</a>

                  <!-- Attachment UID -->
                  <input type="hidden" tal:attributes="name string:attachments.UID:records;
                                                       value string:${attachment/UID}"/>

                  <!-- Order -->
                  <input type="hidden" tal:attributes="name string:order:list;
                                                       value string:${attachment/UID}"/>
                </td>

                <td class="attachment-type">
                  <!-- Attachment Type -->
                  <select name="AttachmentType"
                          class="form-control"
                          tal:condition="can_edit"
                          tal:attributes="name string:attachments.AttachmentType:records;
                                          data-attachment-uid string:${attachment/UID};">
                      <option tal:repeat="item attachment_types"
                              tal:attributes="value item/UID;
                                              selected python:item.UID==attachment['type_uid']"
                              tal:content="item/Title"/>
                  </select>
                  <span tal:condition="not:can_edit"
                        tal:content="attachment/type"/>
                </td>

                <td class="attachment-field-size">
                  <!-- File Size -->
                  <span class="filesize" tal:content="attachment/size"/>
                </td>

                <td class="attachment-analysis">
                  <!-- Attached to Analysis -->
                  <span class="analysis" tal:content="attachment/analysis"/>
                </td>

                <td class="attachment-keywords">
                  <!-- Attachment Keywords -->
                  <input name="AttachmentKeys"
                         class="form-control"
                         tal:condition="can_edit"
                         tal:attributes="name string:attachments.AttachmentKeys:records;
                                         value attachment/keywords;"/>
                  <span tal:condition="not:can_edit"
                        tal:content="attachment/keywords"/>
                </td>

                <td class="attachment-report-option">
                  <!-- Attachment Report Option
                        i=Ignore in Report
                        r=Render in Report (default)
                    -->
                  <select name="ReportOption"
                          class="form-control"
                          tal:condition="can_edit"
                          tal:attributes="name string:attachments.ReportOption:records;
                                          data-attachment-uid string:${attachment/UID}">
                    <option tal:repeat="item report_options"
                            tal:attributes="value python:item[0];
                                            selected python:item[0]==attachment['report_option']"
                            tal:content="python: item[1]"/>
                  </select>
                  <span tal:condition="not:can_edit"
                        tal:content="attachment/report_option_value"/>
                </td>

                <td class="attachment-delete" tal:condition="can_delete">
                  <!-- Delete Attachment
                  Note that for deletion we rely on "can_edit" from attachment
                  -->
                  <input type="checkbox"
                          tal:condition="attachment/can_edit"
                          tal:attributes="name string:attachments.delete:records:boolean;
                                          value python:True;"/>
                  <input type="hidden"
                        tal:attributes="name string:attachments.delete:records:boolean:default;
                                        value python:False;"/>
                </td>
              </tr>
            </tbody>
          </table>

          <!-- short usage description -->
          <div class="formHelp discreet" tal:condition="can_edit">
            <p i18n:translate="">
              Please click the update button after your changes.
            </p>
            <p i18n:translate="">
              Note: You can also drag and drop the attachment rows to change the order they appear in the report.
            </p>
          </div>

          <!-- Update attachments button.
               This will send the values to the `attachments_view` endpoint. -->
          <input class="btn btn-secondary context"
                 id="updateButton"
                 type="submit"
                 name="updateARAttachment"
                 value="Update Attachments"
                 tal:condition="can_edit"
                 i18n:attributes="value"/>

        </form>
        <!-- /Update Form -->
      </div>

      <!-- Add Attachments -->
      <div id="attachments_add"
           tal:condition="can_add"
           class="ar_attachments_list">

        <!-- Add Form -->
        <form action="attachments_view"
              name="attachments_add_form"
              enctype="multipart/form-data"
              tal:attributes="action string:${context/absolute_url}/@@attachments_view/add"
              method="POST">

          <input type="hidden" name="submitted" value="1"/>
          <span tal:replace="structure context/@@authenticator/authenticator"/>

          <table id="attachments_add_table">
            <thead>
              <tr>
                <th class="pr-3" i18n:translate="">Add new Attachment</th>
                <th class="pr-3" i18n:translate="">Type</th>
                <th class="pr-3" i18n:translate="">Analysis</th>
                <th class="pr-3" i18n:translate="">Keywords</th>
                <th class="pr-3" i18n:translate="">Report Option</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <!-- Attachment File Upload -->
                  <input type="file"
                         id="AttachmentFile_file"
                         name="AttachmentFile_file"
                         onchange="string:document.getElementById('addARButton').disabled=false"/>
                </td>
                <td>
                  <!-- Attachment type selection dropdown -->
                  <select name="AttachmentType" class="form-control">
                    <option tal:repeat="item attachment_types"
                            tal:attributes="value item/UID;"
                            tal:content="item/Title"/>
                  </select>
                </td>
                <td>
                  <!-- Analysis selection dropdown -->
                  <tal:analyses>
                    <tal:variables
                      tal:define="analyses attachments_view/get_analyses;
                                  a_analyses python:[a for a in analyses if a.portal_type == 'Analysis'];
                                  bc python:[a for a in analyses if a.portal_type == 'ReferenceAnalysis'];
                                  b_analyses python:[a for a in bc if a.aq_parent.getBlank()];
                                  c_analyses python:[a for a in bc if not a.aq_parent.getBlank()];
                                  d_analyses python:[a for a in analyses if a.portal_type == 'DuplicateAnalysis'];">
                      <select name="Analysis" class="form-control" tal:condition="analyses">
                        <!-- Empty option attaches to the AR -->
                        <option selected="selected"
                                disabled="disabled"
                                tal:attributes="value python:None">
                          <span tal:omit-tag="python:True"
                                i18n:translate="">Attach to Sample</span>
                        </option>
                        <tal:a tal:repeat="item a_analyses">
                          <option tal:attributes="value item/UID;"
                                  tal:content="item/Title"/>
                        </tal:a>
                        <tal:b tal:repeat="item b_analyses">
                          <option tal:attributes="value item/UID;">
                            <span tal:content="item/Title"/>
                            &nbsp;
                            <span i18n:translate="">(Blank)</span>
                          </option>
                        </tal:b>
                        <tal:c tal:repeat="item c_analyses">
                          <option tal:attributes="value item/UID;">
                            <span tal:content="item/Title"/>
                            &nbsp;
                            <span i18n:translate="">(Control)</span>
                          </option>
                        </tal:c>
                        <tal:d tal:repeat="item d_analyses">
                          <option tal:attributes="value item/UID;">
                            <span tal:content="item/Title"/>
                            &nbsp;
                            <span i18n:translate="">(Duplicate)</span>
                          </option>
                        </tal:d>
                      </select>
                    </tal:variables>
                  </tal:analyses>
                </td>
                <td>
                  <!-- Attachment Keywords -->
                  <input class="form-control" name="AttachmentKeys"/>
                </td>
                <td>
                <!-- Attachment Report Option
                      a=Attach to Report (default)
                      i=Ignore in Report
                      r=Render in Report
                    -->
                  <select name="ReportOption" class="form-control">
                    <option tal:repeat="item report_options"
                            tal:attributes="value python:item[0];"
                            tal:content="python: item[1]"/>
                  </select>
                </td>
              </tr>
            </tbody>
          </table>

          <!-- short help desrciption -->
          <div class="formHelp discreet">
            <p i18n:translate="">
              You can use the browse button to select and upload a new attachment.
            </p>
          </div>

          <!-- Add Button.
                This will send the new attachment record to the `analysis_view` endpoint -->
          <input disabled
                 class="context btn btn-secondary"
                 id="addARButton"
                 type="submit"
                 name="addARAttachment"
                 value="Add Attachment"
                 i18n:attributes="value"/>

        </form> <!-- /Add Attachment Form -->
      </div>
    </div>
  </div> <!-- Collapsible content -->
</div>
