{{ header }}
<header class="background-white">
  <div class="container-fluid">
    <div class="row no-space-xs">
      <div class="col-xs-12">
        <div class="content-box vertical-padding-large">
          <span class="text-x-large text-dark">{{ heading_title }}</span>
          <div class="adm-breadcrumb">
            {% for breadcrumb in breadcrumbs %}
              <i class="fas fa-angle-right text-x-small text-gray horizontal-padding-small"></i>
              <a href="{{ breadcrumb.href }}" class="text-x-small text-gray text-decoration-none">{{ breadcrumb.text }}</a>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

<div class="container-fluid flex middle-xs center-content" style="justify-content: center; align-items: center; text-align: center;">
  <div class="full-width margin-large">
    <span class="field-description" style="margin-bottom: 0px">{{ text_upload_description }}</span>
  </div>
  <div class="flex">
    <button type="button" class="btn-default btn-primary btn-small js-open-file-manager">
      <span>{{ text_upload_button }}</span>
      <i class="fas fa-upload"></i>
    </button>
  </div>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12" id="pdf-links-container" style="display: none;">
      <div class="content-box background-white bottom-border-gray padding-medium top-margin-large">
        <div class="row no-space-xs middle-xs">
          <div class="col-xs-11">
            <span class="text-small text-dark text-bold">{{ column_customer_link }}</span>
          </div>
          <div class="col-xs-1 text-right">
            <span class="text-small text-dark text-bold">{{ column_copy_button }}</span>
          </div>
        </div>
      </div>
      <div id="pdf-links-list"></div>
    </div>
    <div class="col-xs-12">
      <div id="no-results-message" style="display: none;">
        <div class="content-box background-white shadow-small vertical-padding-x-large horizontal-padding-large text-center top-margin-large">
          <span class="text-medium text-gray">{{ text_no_results }}</span>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  const DATA = {{ data|json_encode()|raw }};
</script>

{{ footer }}