{% extends "base.html" %}
{% load static i18n %}
{% load account socialaccount %}
{% load crispy_forms_tags %}

{% block extra_css %}
<link href="{{ mirador_url }}css/mirador-combined.css" rel="stylesheet">
<style>
  #rx-nav {
    display: none;
  }
</style>
{% endblock extra_css %}

{% block content %}

{{ json_data|json_script:"context" }}
{% block inner %}

<!-- This is the modal -->
<div id="rx-page-modal" uk-modal>
  <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
    <button class="uk-modal-close-default" aria-label="close sign in modal" type="button" uk-close></button>
    <section class="uk-modal-header">
      <h2 class="uk-modal-title uk-text-center">
        {% if user.is_authenticated %}
        Connect Accounts
        {% else %}
        Sign in
        {% endif %}
      </h2>
    </section>
    {% include "snippets/socialaccount_buttons.html" %}
  </div>
</div>
{% endblock %}


  <nav class="rx-flex-parent" uk-navbar id="rx-page-info-panel">

    <div class="rx-flex-child">
      <a class="uk-navbar-item uk-logo uk-padding-remove-left rx-page-logo" href="/">
        <img src="{% static 'images/readux.svg' %}" style="width: 50px; padding: 0 0 0 0" alt="Readux">
      </a>
    </div>

    <div class="rx-flex-child uk-navbar-nav rx-page-navbar-nav long-and-truncated">
      <div class="rx-page-title-container long-and-truncated">
        <ul class="rx-page-breadcrumb long-and-truncated">
          <li class="rx-page-breadcrumb-item"><a href="/" alt="Home">Home</a></li>
          <li class="rx-page-breadcrumb-item"><a href="/{{ collectionlink.slug }}" alt="Collections">Collections</a></li>
          {% if volume.collections.first.pid %}
          <li class="rx-page-breadcrumb-item"><a href="{% url 'collection' volume.collections.first.pid %}"
              alt="Collections">{{ volume.collections.first.label }}</a>
          </li>
          {% else %}
          <li class="rx-page-breadcrumb-item"><a class="nav-link" href="/{{ volumelink.slug }}">All Volumes</a></li>
          {% endif %}
          <!-- <li>
            {{ request.GET.type }}
          </li> -->
        </ul>

        <!-- This is the modal -->
        <div id="rx-volume-title" uk-modal>
          <div class="uk-modal-dialog uk-modal-body">
            <ul class="rx-page-breadcrumb">
              <li class="rx-page-breadcrumb-item"><a href="/" alt="Home">Home</a></li>
              <li class="rx-page-breadcrumb-item"><a href="/{{ collectionlink.slug }}" alt="Collections">Collections</a></li>
              {% if volume.collections.first.pid %}
              <li class="rx-page-breadcrumb-item"><a href="{% url 'collection' volume.collections.first.pid %}"
                  alt="Collections">{{ volume.collections.first.label }}</a>
              </li>
              {% else %}
              <li class="rx-page-breadcrumb-item"><a class="nav-link" href="/{{ volumelink. }}">All Volumes</a></li>
              {% endif %}
              <!-- <li>
                        {{ request.GET.type }}
                      </li> -->
            </ul>
            <button class="uk-modal-close-default" aria-label="close the modal" type="button" uk-close></button>
            <p>{{volume.label}}</p>
          </div>
        </div>

        <a href="#rx-volume-title" class="rx-nav-item" uk-toggle>
          <div id="main" class="rx-page-title long-and-truncated" >{{volume.label}}</div>
        </a>
      </div>
    </div>

    <div class="rx-flex-child short-and-fixed">
      <ul class="uk-navbar-nav">
        <li>
          <a href="/search/" aria-label="full site search" title="Full Site Search"
            uk-tooltip="title: Full Site Search; pos: right">
            <span class="uk-icon uk-icon-button" aria-hidden="true" uk-icon="icon: search"></span>
          </a>
        </li>
        {% if request.user.is_authenticated %}
        <li>
          {# URL provided by django-allauth/account/urls.py #}
          <a class="{% if url_name == 'index' %}uk-active{% endif %}" uk-tooltip="title: Django admin; pos: right"
            aria-label="link to the django admin" title="Access Django Admin Site" href="/admin/">
            <span class="uk-user uk-icon-button" aria-hidden="true" uk-icon="icon: cog"></span>
          </a>
        </li>
        <li>
          {# URL provided by django-allauth/account/urls.py #}
          <a class="{% if url_name == 'index' %}uk-active{% endif %}" uk-tooltip="title: Your account; pos: right"
            aria-label="link to your account page" title="Your Account Details" href="{% url 'users:update'  %}">
            <span class="uk-icon uk-icon-button" aria-hidden="true" uk-icon="icon: user"></span>
          </a>
        </li>
        <li>
          {# URL provided by django-allauth/account/urls.py #}
          <a class="{% if url_name == 'index' %}uk-active{% endif %} uk-padding-remove-right"
            uk-tooltip="title: Logout; pos: right" aria-label="signout" title="Signout" href="{% url 'account_logout' %}">
            <span class="uk-icon uk-icon-button" aria-hidden="true" uk-icon="icon: sign-out"></span>
          </a>
        </li>
        {% else %}
        <li>
          {# URL provided by django-allauth/account/urls.py #}
          <!-- <a href="{% url 'account_login' %}"> -->
          <a href="#signin-modal" aria-label="Sign in" title="Sign in" uk-tooltip="title: Sign in; pos: right" uk-toggle>
            <span class="uk-icon  uk-icon-button uk-margin-small-right" aria-hidden="true" uk-icon="icon: sign-in"></span>
          </a>
        </li>
        {% endif %}
        <li>
          <a href="#" aria-label="Page options" title="Page options" uk-tooltip="title: Page options; pos: right"
            uk-toggle="target: #offcanvas-usage">
            <span class="uk-icon uk-icon-button" aria-hidden="true" uk-icon="icon: menu"></span>
          </a>
        </li>
      </ul>
    </div>

  </nav>

  <div id="offcanvas-usage" uk-offcanvas="flip: true">
    <div class="uk-offcanvas-bar rx-offcanvas-bar">

    <div class="rx-info">
      <a type="button" role="button" tabindex="0" class="uk-offcanvas-close rx-offcanvas-close rx-page-info-btn">close</a>
    </div>

    <div class="rx-info">
      <!-- new search form -->
      <nav class="uk-navbar-container" uk-navbar>
          <div class="uk-navbar-item" style="width: 100%;">
            {% if page.pid is not None %}
            <form class="uk-search uk-search-default uk-search-navbar rx-page-search-container"
              id="manifest-search-form" uk-grid>
              <div class="uk-width-3-4">
                <input type="hidden" value={{ volume.pid }} name="volume-pid" id="search-volume-pid" />
                <span uk-search-icon class="rx-search-icon"></span>
                <input class="uk-search-input uk-input-remove rx-search-input" type="text" placeholder="Search this volume" aria-label="Search" name="query"
                value="{{request.GET.q}}" id="search-query-text"/>
              </div>
              <fieldset class="uk-margin uk-grid-small uk-width-expand uk-child-width-auto uk-grid rx-page-search-options" style="border:0;">
                <legend style="display:none;">Search Type:</legend>
                <label title="Click to include partial matches" class="rx-page-search-option-label">
                  <input class="uk-radio" type="radio" {%if 'exact' not in request.GET.type %}checked{% endif %} aria-label="include partial" value="partial" name="search-type">
                  Partial
                </label>
                <label title="Click for exact matches only" class="rx-page-search-option-label">
                  <input class="uk-radio" type="radio" {%if 'exact' in request.GET.type %}checked{% endif %} aria-label="exact only" value="exact" name="search-type" id="search-exact">
                  Exact
                </label>
              </fieldset>
            </form>
            {% else %}
            <!-- <form class="uk-search uk-search-default"
              action="{% url 'volumeall' volume.pid %}" method="get" accept-charset="utf-8">
              {% csrf_token %}
              <span uk-search-icon></span>
              <input class="uk-search-input" type="text" placeholder="Search this volume" aria-label="Search" name="q"
                value="{{request.GET.q}}">
            </form> -->

            {% endif %}
          </div>
      </nav>

      <!-- new search form -->
    </div>

    <div class="rx-info uk-hidden" id="rdx-search-results">
      <div class="rx-info-content-container uk-padding-remove-vertical">
        <div class="rx-info-content">
          <div>
            <!-- nav head -->
            <ul class="uk-tab" uk-switcher>
              <li><a href="#"><span id="annotation-count"></span> hits in text</a></li>
              <li><a href="#"><span id="user-annotation-count"></span> hits in your annotations</a></li>
            </ul>
            <!-- end of nav head -->
            <!-- nav body -->
            <ul class="uk-switcher uk-margin-small rx-search-result">
              <li>
                <!-- Search results list are populated by project.js -->
                <ul class="uk-padding-remove" id="ocr-annotation-results"></ul>
              </li>
              <li>
                <!-- Search results list are populated by project.js -->
                <ul class="uk-padding-remove" id="user-annotation-results"></ul>
              </li>
            </ul>
            <!-- end of nav body -->
          </div>
        </div>
      </div>
    </div>


    <div class="rx-info">
      <div class="rx-info-title">Basic Information</div>

      <div class="rx-info-content-container">

        <v-volume-annotations :manifest-count="{{ user_annotation_count }}" :page-count="{{ user_annotation_page_count }}" annotation-index="{{user_annotation_index}}"></v-volume-annotations>
        <!--
        {% if user_annotation_count > 0 %}
        <ul class="uk-subnav uk-subnav-pill" uk-switcher>
          <li><a href="#" id="rx-annotation-manifest">{{ user_annotation_count }} annotations in manifest</a></li>
          <li><a href="#" id="rx-annotation-page"> annotations on page</a></li>
        </ul>
        {% endif %}
        -->

        <div class="rx-info-content">
          <div class="rx-info-content-label">Title</div>
          <div class="rx-info-content-value">{{ volume.label }}</div>
        </div>

        <div class="rx-info-content">
          <div class="rx-info-content-label">Authors</div>
          <div class="rx-info-content-value">{{ volume.author }}</div>
        </div>

        <div class="rx-info-content">
          <div class="rx-info-content-label">Publication Date</div>
          <div class="rx-info-content-value">{{ volume.published_date }}</div>
        </div>

        <div class="rx-info-content">
          <div class="rx-info-content-label">Collections</div>
          <div class="rx-info-content-value uk-margin-small-top">
            {% for col in volume.collections.all %}
            <a class="nav-link" href="{% url 'collection' col.pid %}">
              <div class="rx-btn rx-btn-collection">{{ col.label }}</div>
            </a>
            {% endfor %}
          </div>
        </div>

        <div class="rx-info-content">
          <div class="rx-info-content-label">Publisher</div>
          <div class="rx-info-content-value">{{ volume.published_city }} : {{ volume.publisher }}</div>
        </div>

        <div class="rx-info-content">
          <div class="rx-info-content-label">Summary</div>
          <div class="rx-info-content-value">{{ volume.summary|safe }}</div>
        </div>

        {% if volume.note_set|length %}
        <div class="rx-info-content">
          <div class="rx-info-content-label">Notes</div>
          <div class="rx-info-content-value">
            <ul>
              {% for note in volume.note_set.all %}
              <li>{{ note.label }}</li>
              {% endfor %}
            </ul>
          </div>
        </div>
        {% endif %}

      </div>
    </div>

    <div class="rx-info">
      <div class="rx-info-title">Attribution</div>

      <div class="rx-info-content-container">

        <div class="rx-info-content">
          <div class="rx-info-content-label">Institution</div>
          <div class="rx-info-content-value">{{ volume.attribution }}</div>
        </div>

        <div class="rx-info-content">
          <div class="rx-info-content-label">License</div>
          <div class="rx-info-content-value">{{ volume.license }}</div>
        </div>

      </div>
    </div>

    <div class="rx-info">
      <div class="rx-info-title">Actions</div>
      <div class="rx-info-content-container">
        <div class="rx-info-content">
          <a class="rx-action-btn" href="{{volume.pdf}}" target="_blank">View Volume PDF</a>
        </div>
        <div class="rx-info-content">
          <a class="rx-action-btn" href="https://{{ request.META.HTTP_HOST }}{% url 'ris' volume.pid %}"
            target="_blank">Export Citation in RIS</a>
        </div>

        <v-volume-export-annotation-btn :manifest-count="{{ user_annotation_count }}">
          <form action="{% url 'export' volume.pid %}" class="button_to" method="GET" id="rx-annotation-export-form">
            <a class="rx-action-btn" href="#" onclick="rxFormSubmit('rx-annotation-export-form');">Export
              Annotations</a>
            {% csrf_token %}
          </form>
        </v-volume-export-annotation-btn>

        <div class="rx-info-content">
          <a class="rx-action-btn" href="https://voyant-tools.org/?corpus={{volume.pid}}&archive=https://{{ request.META.HTTP_HOST }}{% url 'PlainExport' 'v2' volume.pid %}"
            target="_blank">Send to Voyant</a>
        </div>

        <!--Text overlay modal-->

        <button class="rx-btn rx-btn-collection" type="button" uk-toggle="target: #text-overlay-modal">View Text Overlay</button>

        <v-info-content-url-page-text label="Page Text">
        </v-info-content-url-page-text>

        <!-- <div id="text-overlay-modal" uk-modal>
          <div class="uk-modal-dialog uk-modal-body">
              <button class="uk-modal-close-default" type="button" uk-close></button>
              <h2 class="uk-modal-title">Text</h2>
              <p>{{page.result}}</p>
          </div>
        </div> -->

      </div>
    </div>

    <div class="rx-info">
      <div class="rx-info-title">URLs</div>
      <div class="rx-info-content-container">

        <v-info-content-url-single label="Manifest"
          url="https://{{ request.META.HTTP_HOST }}{% url 'ManifestRender' 'v2' volume.pid %}">
        </v-info-content-url-single>

        <v-info-content-url-multiple label="Collection Manifest">
          {% for col in volume.collections.all %}
          <v-info-content-url-unit url="https://{{ request.META.HTTP_HOST }}{% url 'CollectionRender' 'v2' col.pid %}">
          </v-info-content-url-unit>
          {% endfor %}
        </v-info-content-url-multiple>

        <v-info-content-url-single label="Stable Volume"
          url="https://{{ request.META.HTTP_HOST }}{% url 'volume' volume.pid %}/page/all">
        </v-info-content-url-single>

        <!-- <p><a href="{{ pagelink }}/{{ page.pid }}/full/full/0/default.jpg" target="_blank">{{ pagelink }}/{{ page.pid }}/full/full/0/default.jpg</a></p> -->
        <v-info-content-url-image-link label="Image Link" pagelink="{{ pagelink }}" url="{{ localUrls }}">
        </v-info-content-url-image-link>

        {% if "/page/all" in request.get_full_path in request.get_full_path %}
          <v-info-content-url-external label="Stable Page" volume="{% url 'volume' volume.pid %}" url="https://{{ request.META.HTTP_HOST }}{% url 'volume' volume.pid %}/page/all">
          </v-info-content-url-external>
        {% else %}
          <v-info-content-url-external label="Stable Page" volume="{% url 'volume' volume.pid %}" url="https://{{ request.META.HTTP_HOST }}{% url 'volume' volume.pid %}/page/{{ page.pid }}">
          </v-info-content-url-external>
        {% endif %}
      </div>
    </div>

    <!-- start ocr el -->
    <div id="ocr" style="opacity: 0;"  role="region" aria-live="polite"></div>
    <!-- end ocr el -->

    </div>
  </div>


{% endblock content %}

{% block viewer %}

<div id="viewer" role="region"></div>


{% if page.pid is not None %}

<!--
        <p id="test"></p>
        <a class="facebook" href='http://www.facebook.com/sharer.php?s=100&p[url]=http://{{ request.META.HTTP_HOST }}{{ request.path }}&p[images][0]{{ page.IIIF_IMAGE_SERVER_BASE }}{{ page.pid }}/full/600,/0/default.jpg' target="_blank">
        <img src="https://www.cabq.gov/culturalservices/biopark/images/share-on-facebook.png/@@images/image.png" title="Facebook" alt="Facebook" ></a>
-->
{% endif %}

{% endblock viewer %}

{% block extra_javascript %}

<script src="{{ mirador_url}}mirador.js"></script>
<script type="text/javascript">
  $(function () {
    Mirador({
      "id": "viewer",
      "mainMenuSettings" : {
        'show' : false,
        'buttons' : {
          info: false,
        }
      },
      "layout": "1x1",
      "data": [
        {
          "manifestUri": "https://{{ request.META.HTTP_HOST }}/iiif/v2/{{ volume.pid }}/manifest", "location": "Emory University"
        }
      ],
      'windowSettings': {
        "overlay": true,
        "canvasControls": {}
      },
      "windowObjects": [{
        loadedManifest: "https://{{ request.META.HTTP_HOST }}/iiif/v2/{{ volume.pid }}/manifest",
        annotationLayer: true,
        annotationCreation: true,
        annotationState: 'annoOncreateOn',
        {% if "/page/all" not in request.get_full_path %}
        canvasID: 'https://{{ request.META.HTTP_HOST }}/iiif/{{ page.manifest.pid }}/canvas/{{ page.pid }}',
        {% endif %}
        displayLayout: false,
        sidePanel: false,
        bottomPanel: false,
        {% if "/page/all" in request.get_full_path %}
        canvasID: 'https://{{ request.META.HTTP_HOST }}/iiif/{{ volume.pid }}/canvas/{{ volume.canvas_set.pid.first }}',
        viewType: "ThumbnailsView"
        {% endif %}
      }],
  {% if user.is_anonymous %}
  "availableAnnotationDrawingTools": [],
    "availableAnnotationStylePickers": [],
      {% else %}
        username: '{{user.get_username}}',
        usernamePretty: '{{user.name}}',
      {% endif %}
      "annotationEndpoint": { "name":"Readux", "module": "ReaduxEndpoint" }
    });
  });

</script>
<script type="text/javascript">
  /* Add jQuery function `icontains` for case insensitive version of
     jQuery's contains method.
     https://stackoverflow.com/a/8747204/1792144
     Usage `$( "span:icontains('woRd')")`
     Add it after Mirador loads.
     We can use this to highlight text when it is searched.
  */
  jQuery.expr[':'].icontains = function(a, i, m) {
    return jQuery(a).text().toUpperCase()
        .indexOf(m[3].toUpperCase()) >= 0;
  };


  {% if request.GET.q in request.get_full_path %}
    UIkit.offcanvas($('#offcanvas-usage')).show();
    fetchResults();
    // document.getElementById('manifest-search-form').submit();

  {% endif %}
</script>
{% endblock extra_javascript %}