{# -*- coding: utf-8 -*-

  This file is part of Invenio.
  Copyright (C) 2015-2019 CERN.
  Copyright (C)      2022 TU Wien.

  Invenio is free software; you can redistribute it and/or modify it
  under the terms of the MIT License; see LICENSE file for more details.
#}

{%- extends config.PREVIEWER_BASE_TEMPLATE %}

{%- block html_tags %}
  {{ html_tags|safe }}
{%- endblock %}

{%- block head %}
  {{ super() }}
  <meta name="google" content="notranslate">
  <link rel="resource" type="application/l10n"
    href="{{ url_for('static', filename='js/pdfjs/web/locale/locale.properties') }}" />
{%- endblock %}

{%- block page_body %}
  <div id="outerContainer" class="loadingInProgress">

    <div id="sidebarContainer">
      <div id="toolbarSidebar">
        <div class="splitToolbarButton toggled">
          <button id="viewThumbnail" class="toolbarButton group toggled" title="Show Thumbnails" tabindex="2" data-l10n-id="thumbs">
              <span data-l10n-id="thumbs_label">{{_('Thumbnails')}}</span>
          </button>
          <button id="viewOutline" class="toolbarButton group" title="Show Document Outline" tabindex="3" data-l10n-id="outline">
              <span data-l10n-id="outline_label">{{_('Document Outline')}}</span>
          </button>
        </div>
      </div>
      <div id="sidebarContent">
        <div id="thumbnailView">
        </div>
        <div id="outlineView" class="hidden">
        </div>
      </div>
    </div>  <!-- sidebarContainer -->

    <div id="mainContainer">
      <div class="findbar hidden doorHanger hiddenSmallView" id="findbar">
        <input id="pdf-file-uri" type="hidden" value="{{ file.uri }}" />
        <label for="findInput" class="toolbarLabel" data-l10n-id="find_label">{{_('Find:')}}</label>
        <input id="findInput" class="toolbarField" tabindex="41">
        <div class="splitToolbarButton">
          <button class="toolbarButton findPrevious" title="" id="findPrevious" tabindex="42" data-l10n-id="find_previous">
            <span data-l10n-id="find_previous_label">{{_('Previous')}}</span>
          </button>
          <div class="splitToolbarButtonSeparator"></div>
          <button class="toolbarButton findNext" title="" id="findNext" tabindex="43" data-l10n-id="find_next">
            <span data-l10n-id="find_next_label">{{_('Next')}}</span>
          </button>
        </div>
        <input type="checkbox" id="findHighlightAll" class="toolbarField">
        <label for="findHighlightAll" class="toolbarLabel" tabindex="44" data-l10n-id="find_highlight">{{_('Highlight all')}}</label>
        <input type="checkbox" id="findMatchCase" class="toolbarField">
        <label for="findMatchCase" class="toolbarLabel" tabindex="45" data-l10n-id="find_match_case_label">{{_('Match case')}}</label>
        <span id="findMsg" class="toolbarLabel"></span>
      </div>  <!-- findbar -->

      <div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
        <div id="secondaryToolbarButtonContainer">

          <button id="secondaryFullScreenMode" class="secondaryToolbarButton presentationMode visibleLargeView" title="{{_('Switch to Full Screen Mode')}}" tabindex="18">
            <span>{{_('Full Screen Mode')}}</span>
          </button>

          <button id="secondaryPrint" class="secondaryToolbarButton print visibleMediumView" title="{{_('Print')}}" tabindex="20" data-l10n-id="print">
            <span data-l10n-id="print_label">{{_('Print')}}</span>
          </button>

          <button id="secondaryDownload" class="secondaryToolbarButton download visibleMediumView" title="{{_('Download')}}" tabindex="21" data-l10n-id="download">
            <span data-l10n-id="download_label">{{_('Download')}}</span>
          </button>

          <div class="horizontalToolbarSeparator visibleLargeView"></div>

          <button id="firstPage" class="secondaryToolbarButton firstPage" title="{{_('Go to First Page')}}" tabindex="23" data-l10n-id="first_page">
            <span data-l10n-id="first_page_label">{{_('Go to First Page')}}</span>
          </button>
          <button id="lastPage" class="secondaryToolbarButton lastPage" title="{{_('Go to Last Page')}}" tabindex="24" data-l10n-id="last_page">
            <span data-l10n-id="last_page_label">{{_('Go to Last Page')}}</span>
          </button>

          <div class="horizontalToolbarSeparator"></div>

          <button id="pageRotateCw" class="secondaryToolbarButton rotateCw" title="{{_('Rotate Clockwise')}}" tabindex="25" data-l10n-id="page_rotate_cw">
            <span data-l10n-id="page_rotate_cw_label">{{_('Rotate Clockwise')}}</span>
          </button>
          <button id="pageRotateCcw" class="secondaryToolbarButton rotateCcw" title="{{_('Rotate Counterclockwise')}}" tabindex="26" data-l10n-id="page_rotate_ccw">
            <span data-l10n-id="page_rotate_ccw_label">{{_('Rotate Counterclockwise')}}</span>
          </button>

          <div class="horizontalToolbarSeparator"></div>

          <button id="toggleHandTool" class="secondaryToolbarButton handTool" title="Enable hand tool" tabindex="27" data-l10n-id="hand_tool_enable">
            <span data-l10n-id="hand_tool_enable_label">{{_('Enable hand tool')}}</span>
          </button>

          <div class="horizontalToolbarSeparator"></div>

          <button id="documentProperties" class="secondaryToolbarButton documentProperties" title="{{_('Document Properties')}}&hellip;" tabindex="28" data-l10n-id="document_properties">
            <span data-l10n-id="document_properties_label">{{_('Document Properties')}}&hellip;</span>
          </button>
        </div>
      </div>  <!-- secondaryToolbar -->

      <div class="toolbar">
        <div id="toolbarContainer">
          <div id="toolbarViewer">
            <div id="toolbarViewerLeft">
              <button id="sidebarToggle" class="toolbarButton" title="{{_('Toggle Sidebar')}}" tabindex="4" data-l10n-id="toggle_sidebar">
                <span data-l10n-id="toggle_sidebar_label">{{_('Toggle Sidebar')}}</span>
              </button>
              <div class="toolbarButtonSpacer"></div>
              <button id="viewFind" class="toolbarButton group hiddenSmallView" title="{{_('Find in Document')}}" tabindex="5" data-l10n-id="findbar">
                  <span data-l10n-id="findbar_label">{{_('Find')}}</span>
              </button>
              <div class="splitToolbarButton">
                <button class="toolbarButton pageUp" title="{{_('Previous Page')}}" id="previous" tabindex="6" data-l10n-id="previous">
                  <span data-l10n-id="previous_label">{{_('Previous')}}</span>
                </button>
                <div class="splitToolbarButtonSeparator"></div>
                <button class="toolbarButton pageDown" title="{{_('Next Page')}}" id="next" tabindex="7" data-l10n-id="next">
                  <span data-l10n-id="next_label">{{_('Next')}}</span>
                </button>
              </div>
              <label id="pageNumberLabel" class="toolbarLabel" for="pageNumber" data-l10n-id="page_label">{{_('Page:')}}</label>
              <input type="number" id="pageNumber" class="toolbarField pageNumber" value="1" size="4" min="1" tabindex="8">
              <span id="numPages" class="toolbarLabel"></span>
            </div>
            <div id="toolbarViewerRight">

              <button id="fullScreenMode" class="toolbarButton presentationMode hiddenLargeView" title="{{_('Switch to Full Screen Mode')}}" tabindex="12">
                <span>{{_('Full Screen Mode')}}</span>
              </button>

              <button id="print" class="toolbarButton print hiddenMediumView" title="{{_('Print')}}" tabindex="14" data-l10n-id="print">
                <span data-l10n-id="print_label">{{_('Print')}}</span>
              </button>

              <button id="download" class="toolbarButton download hiddenMediumView" title="{{_('Download')}}" tabindex="15" data-l10n-id="download">
                <span data-l10n-id="download_label">{{_('Download')}}</span>
              </button>

              <div class="verticalToolbarSeparator hiddenSmallView"></div>

              <button id="secondaryToolbarToggle" class="toolbarButton" title="{{_('Tools')}}" tabindex="17" data-l10n-id="tools">
                <span data-l10n-id="tools_label">{{_('Tools')}}</span>
              </button>
            </div>
            <div class="outerCenter">
              <div class="innerCenter" id="toolbarViewerMiddle">
                <div class="splitToolbarButton">
                  <button id="zoomOut" class="toolbarButton zoomOut" title="{{_('Zoom Out')}}" tabindex="9" data-l10n-id="zoom_out">
                    <span data-l10n-id="zoom_out_label">{{_('Zoom Out')}}</span>
                  </button>
                  <div class="splitToolbarButtonSeparator"></div>
                  <button id="zoomIn" class="toolbarButton zoomIn" title="{{_('Zoom In')}}" tabindex="10" data-l10n-id="zoom_in">
                    <span data-l10n-id="zoom_in_label">{{_('Zoom In')}}</span>
                    </button>
                </div>
                <span id="scaleSelectContainer" class="dropdownToolbarButton">
                    <select id="scaleSelect" title="{{_('Zoom')}}" tabindex="11" data-l10n-id="zoom">
                    <option id="pageAutoOption" value="auto" selected="selected" data-l10n-id="page_scale_auto">{{_('Automatic Zoom')}}</option>
                    <option id="pageActualOption" value="page-actual" data-l10n-id="page_scale_actual">{{_('Actual Size')}}</option>
                    <option id="pageFitOption" value="page-fit" data-l10n-id="page_scale_fit">{{_('Fit Page')}}</option>
                    <option id="pageWidthOption" value="page-width" data-l10n-id="page_scale_width">{{_('Full Width')}}</option>
                    <option id="customScaleOption" value="custom"></option>
                    <option value="0.5">50%</option>
                    <option value="0.75">75%</option>
                    <option value="1">100%</option>
                    <option value="1.25">125%</option>
                    <option value="1.5">150%</option>
                    <option value="2">200%</option>
                  </select>
                </span>
              </div>
            </div>
          </div>
          <div id="loadingBar">
            <div class="progress">
              <div class="glimmer">
              </div>
            </div>
          </div>
        </div>
      </div>

      <menu type="context" id="viewerContextMenu">
        <menuitem id="contextFirstPage" label="{{_('First Page')}}"
                  data-l10n-id="first_page"></menuitem>
        <menuitem id="contextLastPage" label="Last Page"
                  data-l10n-id="last_page"></menuitem>
        <menuitem id="contextPageRotateCw" label="Rotate Clockwise"
                  data-l10n-id="page_rotate_cw"></menuitem>
        <menuitem id="contextPageRotateCcw" label="Rotate Counter-Clockwise"
                  data-l10n-id="page_rotate_ccw"></menuitem>
      </menu>

      <div id="viewerContainer" tabindex="0">
        <div id="viewer" class="pdfViewer"></div>
      </div>

      <div id="errorWrapper" hidden='true'>
        <div id="errorMessageLeft">
          <span id="errorMessage"></span>
          <button id="errorShowMore" data-l10n-id="error_more_info">
            {{_('More Information')}}
          </button>
          <button id="errorShowLess" data-l10n-id="error_less_info" hidden='true'>
            {{_('Less Information')}}
          </button>
        </div>
        <div id="errorMessageRight">
          <button id="errorClose" data-l10n-id="error_close">
            {{_('Close')}}
          </button>
        </div>
        <div class="clearBoth"></div>
        <textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
      </div>
    </div> <!-- mainContainer -->

    <div id="overlayContainer" class="hidden">
      <div id="passwordOverlay" class="container hidden">
        <div class="dialog">
          <div class="row">
            <p id="passwordText" data-l10n-id="password_label">{{ _("Enter the password to open this PDF file:") }}</p>
          </div>
          <div class="row">
            <!-- The type="password" attribute is set via script, to prevent warnings in Firefox for all http:// documents. -->
            <input id="password" class="toolbarField" />
          </div>
          <div class="buttonRow">
            <button id="passwordCancel" class="overlayButton"><span data-l10n-id="password_cancel">{{ _("Cancel") }}</span></button>
            <button id="passwordSubmit" class="overlayButton"><span data-l10n-id="password_ok">{{ _("OK") }}</span></button>
          </div>
        </div>
      </div>
      <div id="documentPropertiesOverlay" class="hidden">
        <div class="doorHanger">
          <div class="row">
            <span data-l10n-id="document_properties_file_name">{{_('File name:')}}</span> <p id="fileNameField">-</p>
          </div>
          <div class="row">
            <span data-l10n-id="document_properties_file_size">{{_('File size:')}}</span> <p id="fileSizeField">-</p>
          </div>
          <div class="separator"></div>
          <div class="row">
            <span data-l10n-id="document_properties_title">{{_('Title:')}}</span> <p id="titleField">-</p>
          </div>
          <div class="row">
            <span data-l10n-id="document_properties_author">{{_('Author:')}}</span> <p id="authorField">-</p>
          </div>
          <div class="row">
            <span data-l10n-id="document_properties_subject">{{_('Subject:')}}</span> <p id="subjectField">-</p>
          </div>
          <div class="row">
            <span data-l10n-id="document_properties_keywords">{{_('Keywords:')}}</span> <p id="keywordsField">-</p>
          </div>
          <div class="row">
            <span data-l10n-id="document_properties_creation_date">{{_('Creation Date:')}}</span> <p id="creationDateField">-</p>
          </div>
          <div class="row">
            <span data-l10n-id="document_properties_modification_date">{{_('Modification Date:')}}</span> <p id="modificationDateField">-</p>
          </div>
          <div class="row">
            <span data-l10n-id="document_properties_creator">{{_('Creator:')}}</span> <p id="creatorField">-</p>
          </div>
          <div class="separator"></div>
          <div class="row">
            <span data-l10n-id="document_properties_producer">{{_('PDF Producer:')}}</span> <p id="producerField">-</p>
          </div>
          <div class="row">
            <span data-l10n-id="document_properties_version">{{_('PDF Version:')}}</span> <p id="versionField">-</p>
          </div>
          <div class="row">
            <span data-l10n-id="document_properties_page_count">{{_('Page Count:')}}</span> <p id="pageCountField">-</p>
          </div>
          <div class="buttonRow">
              <button id="documentPropertiesClose" class="overlayButton"><span data-l10n-id="document_properties_close">{{_('Close')}}</span></button>
          </div>
        </div>
      </div>
    </div>  <!-- overlayContainer -->

  </div> <!-- outerContainer -->
  <div id="printContainer"></div>
  <div id="mozPrintCallback-shim" hidden>
    <div class="mozPrintCallback-dialog-box">
      {{ _('Preparing document for printing...') }}
      <div class="progress-row">
        <progress value="0" max="100"></progress>
        <span class="relative-progress">0%</span>
      </div>
      <div class="progress-actions">
        <input type="button" value="Cancel" class="mozPrintCallback-cancel">
      </div>
    </div>
  </div>
{%- endblock %}


{%- block javascript %}
  {{ super() }}
  {{ webpack['open_pdf.js'] }}
{%- endblock %}
