.content.reference_materials[
  file-uploader="afiles"
  ng-model="data.afiles"
  ng-init="data.afiles = #{@order.reference_materials.map(&:attributes).to_json}"
  data-drop-zone=".uploader_files"
  data-min-file-size="#{1.byte}"
  data-max-number-of-files="5"
  data-max-file-size="#{50.megabytes}"
  data-url="#{account_attachments_path(assetable_type: 'Order', assetable_id: 0, guid: @order.number, klass: 'RefMaterial')}"
  data-remove-path="#{account_attachments_path(format: :json, assetable_type: 'Order', klass: 'RefMaterial', number: @order.number)}"
]
  .content_title
    h3 = t 'account.order.text.reference_materials'
    - if @order.ref_materials_manage?
      .uploader_files[
        ng-class="{
          disabled: keeper.total_count >= 5
        }"
      ]
        input type="file"
        a.button href="javascript:void(0);"
          = t 'account.order.text.add_reference_material'
    - else
      .uploader_files.disabled
        = t 'account.order.text.add_reference_material'

  .order_view_item.order_view_files.ng-cloak ng-if="keeper.files"
    .files_uploader.files_uploader_with_download
      .files_count_error.ng-cloak[
        ng-if="keeper.total_count >= 5"
      ] = t 'errors.reference_materials.too_many_files'

      - if @order.ref_materials_manage?
        .no_files_notice.ng-cloak[
          ng-if="!keeper.files.length"
          ng-show="!keeper.pending.length"
        ] = t 'account.order.text.no_reference_materials'

      .files_list
        ul
          li.template-download ng-repeat="file in keeper.files"
            .file_icon = image_tag 'cabinet/file_uploader_icon.png'
            .files_list_info
              span ng-bind="file.filename"
              a[
                ng-href="#{account_order_attachment_path(order_id: @order.number, id: '_public_token_').gsub('_public_token_', '{{file.public_token}}')}"
              ]
                = t 'account.order.text.download_link'
              i>
                em.date ng-bind="file.created_at | date : 'MMM d, hh:mm a'"
                em.size ng-bind="file.size | humanSize"
              - if @order.ref_materials_manage?
                a.delete_file[
                  href="javascript:void(0);"
                  rel="nofollow"
                  ng-if="file.can_destroy || (file.can_destroy == undefined)"
                  ng-click="file.try_to_remove = true"
                ]
            - if @order.ref_materials_manage?
              .popup_overlay.try-remove-file-confirm.ng-cloak[
                ng-show="file.try_to_remove"
                ng-overlay="file.try_to_remove = false"
              ]
                .popup.popup_attention.reference_popup
                  a.popup_close[
                    href="javascript:void(0);"
                    ng-click="file.try_to_remove = false"
                  ]
                  .reference_popup_icon
                    span
                  .popup_title
                    h2 = t 'account.order.text.reference_remove_confirm'
                  .popup_attention_links
                    button.button.button_ok[
                      ng-click="keeper.removeUploadedFile(file)"
                    ]= t 'account.order.text.reference_remove_approve'
                    button.button.button_cancel[
                      ng-click="file.try_to_remove = false"
                    ]= t 'account.order.text.reference_remove_cancel'

          li.template-download[
            ng-repeat="file in keeper.pending"
            ng-class="{
              field_error: file.error
            }"
          ]
            .file_icon = image_tag 'preloader.gif'
            .files_list_info
              span ng-bind="file.name"
              i
                em ng-bind="file.created_at | date : 'MMM d, hh:mm a'"
                em.ng-cloak ng-show="file.progress < 100"
                  b>[
                    ng-bind="file.loaded | humanSize"

                  ]
                  ' /
                ' {{file.size | humanSize}}
                em.ng-cloak[
                  ng-show="file.progress == 100"
                ] = t 'account.order.text.material_almost_done'
              span.validation_error.ng-cloak[
                ng-if="file.error"
                ng-bind="file.error"
              ]