{% extends 'base.html' %}

{% block body %}

<!-- Modal for timestamping -->
<div class='modal fade' id='timestampModal' tabindex='-1' role='dialog' aria-labelledby='timestampModalLabel' aria-hidden='true'>
  <div class='modal-dialog' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title' id='timestampModalLabel'>{{ 'Timestamp Experiment'|trans }}</h5>
        <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
          <span aria-hidden='true'>&times;</span>
        </button>
      </div>
      <div class='modal-body' data-wait='{{ 'Please wait…' }}'>
        <p><i class='fas fa-exclamation-triangle'></i>
          {{ 'Depending on your configuration, timestamping can incur costs. Are you sure you want to do this?'|trans }}
        </p>
      </div>
      <div class='timestamp-error'></div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-secondary' data-dismiss='modal'>{{ 'Cancel'|trans }}</button>
        <button type='button' data-action='timestamp' class='btn btn-primary'>{{ 'Timestamp'|trans }}</button>
      </div>
    </div>
  </div>
</div>

{% embed 'view-edit.html' %}
  {% block createnew %}
    {% include 'create-new.html' %}
  {% endblock %}
  {% block createmodal %}
    {% include 'show-view-edit.html' %}
  {% endblock %}
{% endembed %}

{% if Entity.entityData.timestamped %}
<div class='alert alert-success'><i class='fas fa-info-circle'></i>
  {{ 'Experiment was timestamped by %s on %s at %s'|trans|format(timestamperFullname, Entity.entityData.timestampedwhen|date('Y-m-d'), Entity.entityData.timestampedwhen|date('H:i:s'))|raw }}
</div>
{% endif %}

<section class='item' style='padding:15px;border-left: 6px solid #{{ Entity.entityData.color }}'>
  <p class='float-right d-inline'>
    <a class='elab-tooltip ml-2' data-action='pin' href='#'>
      <span>{{ 'Toggle pin'|trans }}</span>
      <i title='{{ 'Toggle pin'|trans }}' class='fas fa-thumbtack {{ Entity.Pins.isPinned ? '' : 'grayed-out' }} fa-2x'></i>
    </a>
  </p>

  <div class='action-topmenu'>
    {% if not (Entity.isReadOnly or Entity.entityData.locked) %}
      <a class='elab-tooltip mr-1' href='#' data-action='edit'>
        <span>{{ 'Edit'|trans }}</span>
        <i title='{{ 'Edit'|trans }}' class='fas fa-pencil-alt fa-2x' style='color:#29AEB9'></i>
      </a>
    {% endif %}

    {% if not App.Session.has('is_anon') %}
      <a class='elab-tooltip mr-1' href='#' data-action='duplicate-entity'>
        <span>{{ 'Duplicate'|trans }}</span>
        <i title='{{ 'Duplicate'|trans }}' class='far fa-copy fa-2x'></i>
      </a>
    {% endif %}

    <a class='elab-tooltip mr-1' href='make.php?what=pdf&id={{ Entity.id }}&type={{ Entity.type }}'>
      <span>{{ 'Make a PDF'|trans }}</span>
      <i title='{{ 'Make a PDF'|trans }}' class='fas fa-file-pdf fa-2x'></i>
    </a>

    <a class='elab-tooltip mr-1' href='make.php?what=zip&id={{ Entity.id }}&type={{ Entity.type }}'>
      <span>{{ 'Make a ZIP'|trans }}</span>
      <i title='{{ 'Make a ZIP'|trans }}' class='fas fa-file-archive fa-2x'></i>
    </a>

    {% if Entity.type == 'items' %}
      {% if Entity.entityData.bookable %}
        <a class='elab-tooltip mr-1' href='team.php?item={{ Entity.id }}'>
          <span>{{ 'Book item'|trans }}</span>
          <i title='{{ 'Book item'|trans }}' class='fas fa-calendar-plus fa-2x'></i>
        </a>
      {% endif %}
    {% endif %}

    <!-- LOCK -->
    {% set lockIcon = 'fa-lock-open' %}
    {% set alt = 'Lock/Unlock item'|trans %}
    {% if Entity.entityData.locked %}
        {% set lockIcon = 'fa-lock' %}
        {% set alt = Entity.entityData.lockedwhen %}
    {% endif %}
    <a class='elab-tooltip mr-1' href='#' data-action='lock-entity'>
        <span>{{ alt }}</span>
        <i title='{{ alt }}' class='fas {{lockIcon}} fa-2x'></i>
    </a>

    {% if not App.Session.has('is_anon') and App.Config.configArr.anon_users %}
      <a class='elab-tooltip mr-1' href='#' data-action='share'>
        <span>{{ 'Share'|trans }}</span>
        <i title='{{ 'Share'|trans }}' class='fas fa-share-alt fa-2x'></i>
      </a>
      <input type='text' class='form-control' aria-label='{{ 'Share'|trans }}' id='shareLinkInput' value='' hidden />
    {% endif %}

    <!-- show timestamp button -->
    {% if Entity.type == 'experiments' and not App.Session.has('is_anon') %}
      <a href='#' class='elab-tooltip mr-1' data-action='toggle-modal' data-target='timestampModal'>
        <span>{{ 'Timestamp Experiment'|trans }}</span>
        <i title='{{ 'Timestamp Experiment'|trans }}' class='far fa-calendar-check fa-2x'></i>
      </a>
    {% endif %}

    <!-- BLOXBERG BUTTON -->
    {% if not Entity.isReadOnly and App.Config.configArr.blox_enabled %}
      <a href='#' class='elab-tooltip mr-1' data-action='bloxberg'>
        <span>{{ 'Add to blockchain'|trans }}</span>
        <i title='{{ 'Add to blockchain'|trans }}' class='fas fa-cubes fa-2x'></i>
      </a>
    {% endif %}
  </div>

  <!-- build the tag array -->
  {% if Entity.entityData.tags|length > 0 %}
    <span class='tags mathjax-ignore'>
      <i class='fas fa-tags fa-2x'></i>
      {% set tagsIdArr = Entity.entityData.tags_id|split(',') %}
      {% set tagsValueArr = Entity.entityData.tags|split('|') %}
      {% for key, tag in tagsValueArr %}
        {# the key allows to get the id stored in tagsIdArr #}
        <a class='tag' href='?mode=show&tags%5B%5D={{ tag|url_encode }}'>{{ tag|raw }}</a>
      {% endfor %}
    </span>
  {% endif %}

  <div class='row'>
    <div class='col-6'>
      <p>
        <i aria-hidden='true' class='fas fa-clipboard-{{ Entity.type == 'experiments' ? 'check' : 'list' }}'></i>
          {{ Entity.entityData.category }}
          {% if Entity.entityData.rating > 0 %}
            {{ Entity.entityData.rating|stars|raw }}
          {% endif %}
        <i aria-hidden='true' class='fas fa-eye ml-2' title='{{ 'Visibility'|trans }}'></i> {{ Entity.getCan(Entity.entityData.canread) }}
        <i aria-hidden='true' class='fas fa-pencil-alt ml-2' title='{{ 'Edit'|trans }}'></i> {{ Entity.getCan(Entity.entityData.canwrite) }}
      </p>
    </div>
  </div>

  <!-- DATE -->
  <div>
    <i aria-hidden='true' class='far fa-calendar-alt mr-1'></i>{{ 'Started on'|trans }} {{ Entity.entityData.date|date('Y-m-d') }}
  </div>

  <!-- TITLE : click on it to go to edit mode only if we are not in read only mode -->
  {% set isEditable = not Entity.isReadOnly and not Entity.entityData.locked %}
  <h1 id='documentTitle' class='overflow-break-word {{ isEditable ? 'hover-action' }}' {{ isEditable ? 'data-action="edit"' }}>
      {% if Entity.type == 'items' %}
          <span style='color:#{{ Entity.entityData.color }}'>{{ Entity.entityData.category }}</span>
      {% endif %}
      {{ Entity.entityData.title|raw }}
  </h1>

  <!-- SHOW EVENTS -->
  {% if Entity.entityData.events_id and Entity.type == 'items' %}<i class='far fa-calendar-alt'></i>
    {{ '%s%d%sSee bookings%s'|trans|format("<a href='team.php?item=", Entity.entityData.id, "'>", "</a>")|raw }}
  {% endif %}
  {% if Entity.entityData.is_bound and Entity.type == 'experiments' %}<i class='far fa-calendar-alt'></i>
    {{ '%s%d%sSee bookings%s'|trans|format("<a href='#' data-action='see-events'", 0, "'>", "</a>")|raw }}
    <div id='boundBookings'></div>

  {% endif %}

  <!-- SHOW NEXT STEP -->
  {% set next_step = Entity.entityData.next_step %}
  {% if next_step|length > 0 %}
      {% set nextStepsArr = next_step|split('|') %}
      {% set next = nextStepsArr|first %}
      <p>
      {{ 'Next step'|trans }}: <span style='color:black'>{{ next|raw }}</span>
      </p>
  {% endif %}

  <!--  BODY (show only if not empty) -->
  {% set body = Entity.entityData.body %}
  {% if body != '' %}
      {% set body = Entity.entityData.body|md2html %}
      <!-- Workaround for bug #532; long tables result in empty body returned from md2html:
          If body is empty, reload and don't parse as markdown -->
      {% if body|trim == '' %}
          {% set body = Entity.entityData.body %}
      {% endif %}
      <div id='body_view' class='txt'>{{ body|raw }}</div>
  {% endif %}

  <div id='metadataDiv' class='col-md-6'></div>

  {% include 'steps-links-view.html' %}

  <div class='row'>
    <div class='col-6'>
      <!-- SHOW LAST MOD -->
      <p>{{ 'Last modified on %s'|trans|format(Entity.entityData.lastchange) }}</p>
    </div>
    <div class='col-6'>
      <!-- eLabID -->
      <p class='elabid'>{{ 'Unique eLabID:'|trans }} {{ Entity.entityData.elabid }}</p>
    </div>
  </div>

</section>


{% include 'uploads.html' %}

<!-- only show the json editor if there is at least one file with a .json extension -->
{% if uploadsArr|filter(u => u.real_name|getExt == 'json') %}
  {% include 'json-editor.html' %}
{% endif %}

<section id='commentsDiv'>
  {% if App.Session.get('is_auth') and not App.Session.has('is_anon') %}
    <div id='comment' class='box'>
      <i class='fas fa-comments mr-1 align-baseline'></i><h2 class='d-inline'>{{ 'Comments'|trans }}</h2>
      {% if commentsArr %}
        {% for comment in commentsArr %}
          <div class='box'>
            <div class='comment-header p-2'>
              <span class='text-muted'>{{ comment.fullname|raw }} {{ 'commented'|trans }}</span>
              <span title='{{ comment.datetime }}' class='text-muted relative-moment'></span>
              {% if comment.userid == Entity.Users.userData.userid %}
                <a class='float-right' data-action='destroy-comment' data-target='{{ comment.id }}' title='{{ 'Delete'|trans }}'>
                    <i class='fas fa-trash-alt fa-lg'></i>
                </a>
              {% endif %}
            </div>
            <!-- the comment itself is only editable by the owner -->
            <p class='comment m-2 p-2 {{ comment.userid == Entity.Users.userData.userid ? "editable hl-hover" }}' data-id='{{ comment.id }}'>{{ comment.comment|raw }}</p>
          </div>
        {% endfor %}
      {% endif %}

      <!-- CREATE COMMENT INPUT -->
      <textarea id='commentsCreateArea' class='form-control' autocomplete='off' placeholder='{{ 'Add a comment'|trans }}' aria-label='Comment area'></textarea>
      <div id='commentsCreateButtonDiv' class='mt-4 text-center'>
        <button class='button btn btn-primary' data-action='create-comment'>{{ 'Save'|trans }}</button>
      </div>
    </div>
  {% endif %}
</section>

<!-- REVISIONS -->
{% if revNum > 0 %}
    <span class='float-right'><i class='fas fa-history mr-1'></i>
        <a href='revisions.php?type={{ Entity.type }}&item_id={{ Entity.id }}'>{{ revNum }}
            {% trans %}revision available{% plural revNum %}revisions available{% endtrans %}</a>
    </span>
{% endif %}

<div id='info'
    data-page='view'
    data-type='{{ Entity.type }}'
    data-id='{{ Entity.id }}'
    data-scedit='{{ Entity.Users.userData.sc_edit }}'>
</div>
<div id='shortcuts'
    data-create='{{ Entity.Users.userData.sc_create }}'>
</div>

{% endblock body %}