{% extends "community/_base.html" %}

{% from "macros/box.html" import m_box_content, m_box_menu with context %}
{% from "documents/_macros_audit.html" import m_audit_log %}
{% from "macros/table.html" import m_table %}
{%- from "community/macros.html" import show_all_viewers -%}
{% from "documents/_macros.html" import m_docs_table, m_breadcrumbs2 with context %}
{%- from "community/macros.html" import viewers_snapshot -%}

{% macro user_markup(user) %}
  <a href="{{ url_for('social.user', user_id=user.id) }}"><img
      style="border-radius: 22px;" alt=""
      src="{{ user_photo_url(user, size=16) }}"/>
    {{ user }}
  </a>
{% endmacro %}

{% macro m_breadcrumbs_path(breadcrumbs) %}
  {% for obj in breadcrumbs[0:-1] %}
    <a href="{{ obj.path }}">{{ obj.label }}</a>
    <span class="divider">/</span>
  {% endfor %}

  <span style="font-size: 14pt; color: gray;">{% if doc.lock %}
    <i style="color:black;" class="fa fa-lock"></i>{% endif %}
    {{ doc.title }}</span>
{% endmacro %}

{% block content %}
{#  <script>#}
{#    window.history.pushState("object or string", "Title", "{{ breadcrumbs[0]['path'] }}");#}
{#  </script>#}

  {%- if doc.antivirus_required %}
    <div style="margin: 5px 0;">
      <i class="fa fa-file-o fa-lg"></i>
      {{ m_breadcrumbs2(breadcrumbs) }}
    </div>

    <hr/>

    <p class="small alert alert-warning">
      <span class="fa-stack">
        <i class="fa fa-search fa-stack-2x"></i>
        <i class="fa fa-bug fa-stack-1x text-danger"></i>
      </span>
      {% trans %}Waiting for virus check...{% endtrans %}
    </p>

  {%- elif not doc.antivirus_ok %}
    <p class="alert alert-danger">
      <i class="fa fa-exclamation-triangle"></i>
      {%- trans %}Virus found. Access disabled.{%- endtrans %}
    </p>
  {%- endif %}

  <form name="folder-listing" style="margin-bottom: 0;" method="POST">
    <input id="check_{{ doc.id }}" style="display:none;" type="checkbox" name="object-selected"
           value="{{ doc.sbe_type }}:{{ doc.id }}" checked>
  </form>

  <div>
    <h2>
      {{ m_breadcrumbs_path(breadcrumbs) }}
    </h2>
    <br>
    <a class="conversation-back-btn" href="{{ url_for('.index', community_id=g.community.slug) }}">
      <i class="fa fa-arrow-left"></i> {{ _("Back to document list") }}
    </a>

    <div id="horizontal-doc-menu" class="document-horizontal-menu" style="display: inline;right:0px; top:0px;">
      <div class="btn-group">
        {%- if doc.antivirus_ok %}
          <a class="btn btn-success btn-md pull-right"
             href="{{ url_for('.document_download', community_id=doc.community.slug, doc_id=doc.id, attach=True) }}">
            <i class="glyphicon glyphicon-download"></i>
            {{ _('Download') }}
            <small>({{ doc.content_length|filesize }})</small>
          </a>
        {%- endif %}
      </div>
      <div class="btn-group">
        <a onclick="edit_document()"
           class="btn action action-documents-folder-listing action-documents-folder-listing-download btn-default"
           href="#modal-edit" title="Download" data-toggle="modal"><i class="glyphicon glyphicon-pencil"></i></a>
      </div>
      <div class="btn-group">
        <a onclick="email_document()"
           class="btn action action-documents-folder-listing action-documents-folder-listing-move-files btn-default"
           href="#modal-send-by-email" data-toggle="modal" title="Move to another folder"><i
            class="glyphicon glyphicon-envelope"></i></a>
      </div>
      <div class="btn-group">
        <a href="#modal-delete"
           class="btn action action-documents-folder-listing action-documents-folder-listing-delete btn-danger"
           data-toggle="modal" name="action" title="Delete"><i class="glyphicon glyphicon-trash"></i></a>
      </div>
      <div class="btn-group">
        <div class="dropdown">
          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="true">
            <span class="glyphicon glyphicon-option-horizontal" aria-hidden="true"></span>
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li>
              <a class="" href="#modal-move-files" data-toggle="modal" role="button" title="Move to another folder">
                <i class="glyphicon glyphicon-move"></i>
                {{ _("Move") }}
              </a>
            </li>
            <li>
              <a onclick="replace_document()" class="" href="#modal-upload-new-version" data-toggle="modal"
                 role="button"
                 title="Move to another folder">
                <i class="fa fa-refresh" aria-hidden="true"></i>
                {{ _("Replace") }}
              </a>
            </li>
            <li>
              <form id="document_checkout"
                    action="{{ url_for('.checkin_checkout', doc_id=doc.id, community_id=doc.community.slug) }}"
                    method="POST" target="_new">
                {{ csrf.field() }}
                {% if doc.lock == None %}
                  <input type="hidden" name="action" value="checkout"/>
                  <a style="color: #262626;position: relative;left: 8px;text-decoration: none;" type="submit"
                     class="btn btn-link"
                     onclick="$('#document_checkout').submit(); setTimeout(function () { window.location = '{{ url_for(doc) }}'  }, 500);">
                    <i class="glyphicon glyphicon-download"></i>
                    {{ _("Checkout") }}
                  </a>
                {% else %}
                  <input type="hidden" name="action" value="unlock"/>
                  <a style="color: #262626;position: relative;left: 8px;text-decoration: none;" type="submit"
                     class="btn btn-link" onclick="$('#document_checkout').submit();">
                    <i class="fa fa-unlock"></i>
                    {{ _("Unlock") }}
                  </a>
                {% endif %}
              </form>
            </li>
            <li>
              <a href="{{ url_for(doc) }}" data-toggle="modal" role="button" title="Move to another folder">
                <i class="glyphicon glyphicon-refresh"></i>
                {{ _("Refresh preview") }}
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <span onclick="view_info()" class="glyphicon glyphicon-chevron-right" id="view_info"
          aria-hidden="true"
          style="float: right; font-size: 18pt; position: relative; top: -72px; left: 283px; cursor: pointer; z-index:10;"></span>

    <br><br>
    <div>
    </div>
  </div>

  {%- if doc.description %}
    <p>{{ doc.description }}</p>
    <p>&nbsp;</p>
  {%- endif %}

  <br>

  <div style="border:1px solid silver; width:100%; padding-top: 10px; padding-bottom: 10px;">
    <div class="preview-container" data-page-num="{{ doc.page_num }}">
      <img src="{{ url_for('.document_preview_image',
                        community_id=g.community.slug, doc_id=doc.id,
                        size=doc.preview_size) }}"
           alt="" class="preview" data-page="0"/>

      {%- if has_preview %}
        <a class="preview-nav-button preview-prev" title="{{ _('Previous') }}">
          <i class="fa fa-chevron-circle-left fa-5x"></i>
          <span class="sr-only">{{ _('Previous') }}</span>
        </a>
        <a class="preview-nav-button preview-next" title="{{ _('Next') }}">
          <i class="fa fa-chevron-circle-right fa-5x"></i>
          <span class="sr-only">{{ _('Next') }}</span>
        </a>

        {%- deferJS %}
          <script>
            require(
                ['Abilian', 'SBEDocumentViewerSetup'],
                function (Abilian, viewerSetup) {
                  Abilian.fn.onAppInit(viewerSetup);
                });
          </script>
        {%- enddeferJS %}

      {%- else %}
        {{ _("Document preview not yet available") }}
      {%- endif %}
    </div>
  </div>

  {%- if doc.extra_metadata %}
    <h3 class="main collapsed" data-toggle="collapse"
        href="#doc_extra_metadata">Extra Metadata</h3>

    <div id="doc_extra_metadata" class="collapse">
      {%- set sorted = doc.extra_metadata|dictsort %}
      {{ m_table(sorted) }}
    </div>
  {%- endif %}

{% endblock %}


{% block sidebar %}
  <br><br>
  <div style="border: 1px solid #eee;padding: 14px;">
    <small>
      <p><b>{{ doc.title|truncate(32, False, '...', 0) }}</b></p>
      <b>{{ _("Owner") }}</b> : {{ user_markup(doc.creator) }} <br>
      {{ _('<b>Uploaded:</b> %(date)s (%(age)s)',
               date=(doc.created_at | datetimeformat('short')),
               age=doc.created_at | age(add_direction=False)) }}
      {%- if doc.updated_at != doc.created_at %}
        <br/>
        {{ _('<b>Modified:</b> %(date_age)s', date_age=doc.updated_at|age(add_direction=False, date_threshold='day')) }}
        {%- set lock = doc.lock %}
        {%- if lock %}
          <div class="lock">
            <i class="fa fa-lock"></i>
            {{ _('Locked for edition by %(user)s at %(date)s (%(age)s)',
                  user=lock.user, date=lock.date | datetimeformat('short'), age=lock.date | age) }}
          </div>
        {%- endif %}
      {%- endif %}
    </small>
  </div>

  {% if g.is_manager %}
    <div style="border-left: 1px solid #eee;border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 14px;">
      <p style="color:gray;"><b>{{ _('Readers') }}</b></p>
      {{ show_all_viewers(viewers,_("viewed by")) }}
    </div>
  {% endif %}

  <div style="border-left: 1px solid #eee;border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 14px;">
    <p style="color:gray;"><b>{{ _('Last Changes') }}</b></p>
    {{ m_audit_log(audit_entries) }}
  </div>

  {%- deferJS %}
    <script>
      require(['Abilian', 'SBEFolderGalleryListingSetup'],
          function (Abilian, setupFolderListing) {
            Abilian.fn.onAppInit(setupFolderListing);
          });
    </script>
  {%- enddeferJS %}

  <script>
    var show = 0;

    function view_info() {
      if (show === 0) {
        $("#view_info").css("left", "0");
        $("#sidebar").hide();
        $("div[class='col-md-9']").attr("class", "col-md-12");
        show = 1;
      } else {
        $("#view_info").css("left", "283px");
        $("#sidebar").show();
        $("div[class='col-md-12']").attr("class", "col-md-9");
        show = 0;
      }
    }

    function email_document() {
      var doc_url = "{{ url_for('.document_send', doc_id=doc.id, community_id=doc.community.slug) }}";
      $("#modal-email-form").attr("action", doc_url);
    }

    function edit_document() {
      var doc_url = "{{ url_for('.document_edit', doc_id=doc.id, community_id=doc.community.slug) }}";
      $("#modal-edit-form").attr("action", doc_url);
    }

    function replace_document() {
      var doc_url = "{{ url_for('.document_upload', doc_id=doc.id, community_id=doc.community.slug) }}";
      $(".modal-replacedoc-form").attr("action", doc_url);
    }
  </script>
{% endblock %}

{% block modals %}
  {% include "documents/_modals_document.html" %}
  {% include "documents/_modals_folder_move.html" %}
  {% include "documents/_modals_document_upload_new_version.html" %}
{% endblock %}
