{% extends 'base.html' %}

{% block body %}

{% include('remove-exclusive-edit-mode-modal.html') %}
{% embed 'view-edit.html' %}
  {% block createnew %}
    <div class='d-flex'>
      <div class='align-self-center flex-grow-1 mr-2'>
        {# CUSTOM ID #}
        {# TITLE #}
        <h1 class='text-dark' >
          {% if Entity.entityData.custom_id %}
            <span title='{{ 'Custom ID'|trans }}' class='custom-id-badge'>{{ Entity.entityData.custom_id }}</span>
          {% endif %}
          <span id='documentTitle' class='breakable {{ not Entity.isReadOnly ? 'malleableTitle hl-hover-gray' }} rounded py-1' data-target='title' data-endpoint='{{ Entity.entityType.value }}' data-id='{{ Entity.id }}'>{{ Entity.entityData.title }}</span>
        </h1>
      </div>
      <div class='ml-auto'>
        {% include 'create-new.html' %}
      </div>
    </div>
  {% endblock %}
  {% block createmodal %}
    {% include 'show-view-edit.html' %}
  {% endblock %}
{% endembed %}

{# Exclusive edit mode notification #}
<div id='exclusiveEditModeInfo'>
{% if Entity.ExclusiveEditMode.isActive %}
  {% if Entity.ExclusiveEditMode.dataArr.locked_by != Entity.Users.userData.userid %}
    {% set writeLockNotice = 'This entry is opened by %s in exclusive edit mode since %s. You cannot edit it before %s. %sRequest exclusive edit mode removal%s'|trans|format(
        Entity.ExclusiveEditMode.dataArr.fullname,
        Entity.ExclusiveEditMode.dataArr.locked_at,
        Entity.ExclusiveEditMode.dataArr.locked_until,
        '<button type="button" class="btn btn-sm btn-secondary ml-2" data-action="request-exclusive-edit-mode-removal" data-target-user="%s">'|format(Entity.ExclusiveEditMode.dataArr.locked_by),
        '</button>'
      )|msg('warning', false) %}
  {% endif %}
  {% if Entity.ExclusiveEditMode.dataArr.locked_by == Entity.Users.userData.userid %}
    {% set writeLockNotice = 'You opened this entry in exclusive edit mode at %s and it will stay active until %s, unless deactivated manually in view mode.'|trans|format(
        Entity.ExclusiveEditMode.dataArr.locked_at,
        Entity.ExclusiveEditMode.dataArr.locked_until,
      )|msg('warning', false) %}
  {% endif %}
  {{ writeLockNotice|raw }}
{% endif %}
</div>

{% include('view-edit-toolbar.html') %}

<div id='isTimestampedByInfoDiv'>
{% if Entity.entityData.timestamped %}
  {{ 'Entry was timestamped by %s on %s at %s'|trans|format(timestamperFullname, Entity.entityData.timestamped_at|date('Y-m-d'), Entity.entityData.timestamped_at|date('H:i:s'))|msg('ok', false) }}
{% endif %}
</div>

{% if Entity.entityData.locked %}
  {{ 'Locked by %s on %s at %s'|trans|format(lockerFullname, Entity.entityData.locked_at|date('Y-m-d'), Entity.entityData.locked_at|date('H:i:s'))|msg('ok', false) }}
{% endif %}

<section>

  {# DATE and RATING #}
  <div class='d-flex mb-1'>
    {# DATE #}
    {% if Entity.entityType.value != 'experiments_templates' %}
      <div class='color-medium'>
        {{ 'Started on'|trans }} {{ Entity.entityData.date|date('Y-m-d') }}
      </div>
    {% endif %}
    {# RATING #}
    <div class='ml-auto'>
      {% if Entity.entityData.rating > 0 %}
        <span class='rating-show rounded p-1'><i class='fas fa-star' title='☻'></i>{{ Entity.entityData.rating }}</span>
      {% endif %}
    </div>
  </div>

  {% include('catstat-view.html') %}

  {# TAGS #}
  <div class='d-flex mb-2 align-items-center'>
    {% if Entity.entityData.tags|length > 0 %}
      <div class='edit-mode-label'>
        <i class='fas fa-tags mr-1'></i>{{ 'Tags'|trans }}
      </div>
      <span class='tags mathjax-ignore d-flex-inline flex-wrap'>
        {% for tag in Entity.Tags.readAll() %}
        <a class='tag btn {{- tag.is_favorite ? ' favorite' }}' href='?mode=show&amp;tags%5B%5D={{ tag.tag|url_encode }}'>{{ tag.tag }}</a>
        {% endfor %}
      </span>
    {% endif %}
  </div>

  {# ID #}
  <div class='d-flex mb-2 align-items-center'>
    <div class='edit-mode-label'>
      <i class='fas fa-hashtag mr-2'></i>{{ 'ID'|trans }}
    </div>
    {{ Entity.entityData.id }}
  </div>

  <hr>
  {% include('edit-permissions.html') %}

  {# SHOW EVENTS #}
  {% if Entity.entityData.events_start %}
    <div class='mb-2'>
      <i class='far fa-fw fa-calendar-alt'></i>
      {% set splitItemids = Entity.entityData.events_start_itemid|split('|') %}
      {% for event in Entity.entityData.events_start|split('|') %}
        <a href='team.php?item={{ splitItemids[loop.index - 1] }}&amp;start={{ event|url_encode }}' class='mx-1 btn btn-neutral relative-moment'  title='{{ event|date('Y-m-d H:i:s') }}' aria-label='{{ event|date('Y-m-d H:i:s') }}'></a>
      {% endfor %}
    </div>
    <hr>
  {% 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>
      <span class='next-step-text'>{{ 'Next step'|trans }}:</span> <span class='text-dark'>{{ next }}</span>
      </p>
  {% endif %}

  {# BODY (show only if not empty) #}
  {% set body = Entity.entityData.body_html %}
  {% if body != '' %}
      {# do not display body if set in metadata, done via css to avoid delayed disappearance after JS is executed #}
      {# body in view mode is text-dark for more lisibility see github issue #52 #}
      <div {{ not displayMainText ? 'hidden' }}>
        <h3 data-action='toggle-next' data-opened-icon='fa-caret-down' data-closed-icon='fa-caret-right' class='d-inline togglable-section-title' tabindex='0' role='button' aria-expanded='true' aria-controls='body_view'><i class='fas fa-caret-down fa-fw mr-2'></i>{{ 'Main text'|trans }}</h3>
        <div id='body_view' class='pt-2 text-dark' data-save-hidden='body_view'>{{ body|raw }}</div>
        <hr>
      </div>
  {% endif %}

</section>
<div class='d-flex flex-column align-items-end'>
  {# SHOW OWNER #}
  <div>{{ 'Owner:'|trans }} {{ Entity.entityData.fullname }}</div>
  {# SHOW LAST MOD #}
  <div>{{ 'Last modified on %s'|trans|format(Entity.entityData.modified_at) }}</div>
  {# eLabID: add an if because templates don't have one #}
  {% if Entity.entityData.elabid %}
    <div class='elabid'>{{ 'Unique eLabID:'|trans }} {{ Entity.entityData.elabid }}</div>
  {% endif %}
</div>

<hr>

{# METADATA view #}
{% if Entity.entityData.metadata %}
  <h3 title='{{ 'Toggle visibility'|trans }}' data-action='toggle-next' data-opened-icon='fa-caret-down' data-closed-icon='fa-caret-right' class='d-inline togglable-section-title' tabindex='0' role='button' aria-expanded='true' aria-controls='extraFieldsDiv'><i class='fas fa-caret-down fa-fw mr-2'></i>{{ 'Extra fields'|trans }}</h3>
  <div class='mt-2 col-md-6' id='extraFieldsDiv' data-save-hidden='extraFieldsDiv'>
    {{ Entity.entityData.metadata|formatMetadata }}
  </div>
  <hr>
{% endif %}

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

{% include 'uploads.html' %}

{% if App.Session.get('is_auth') and not App.Session.has('is_anon') %}
  <h3 title='{{ 'Toggle visibility'|trans }}' data-action='toggle-next' data-opened-icon='fa-caret-down' data-closed-icon='fa-caret-right' class='d-inline togglable-section-title' tabindex='0' role='button' aria-expanded='true' aria-controls='commentsDiv'><i class='fas fa-caret-down fa-fw mr-2'></i>{{ 'Comments'|trans }} (<span id='commentsCount'>{{ Entity.entityData.comments|length }}</span>)</h3>
  <div class='mt-2' id='commentsDiv' data-count-for='commentsCount' data-save-hidden='commentsDiv'>
      {% for comment in Entity.entityData.comments %}
        <div class='box countable'>
          <div class='comment-header text-muted p-2'>
            {{ comment.fullname }} {{ 'commented'|trans }}
            <span title='{{ comment.created_at }}' class='relative-moment'></span>
            {% if comment.created_at != comment.modified_at %}
              ({{ 'edited'|trans }} <span title='{{ comment.modified_at }}' class='relative-moment'></span>)
            {% endif %}
            {% if comment.userid == Entity.Users.userData.userid and comment.immutable == 0 %}
              <button type='button' class='btn float-right lh-normal border-0 m-0 p-2 my-n2 hl-hover-gray' data-action='destroy-comment' data-id='{{ comment.id }}' title='{{ 'Delete'|trans }}' aria-label='{{ 'Delete'|trans }}'>
                <i class='fas fa-fw fa-trash-alt fa-lg'></i>
              </button>
            {% endif %}
          </div>
          {# the comment itself is only editable by the owner #}
          <p class='comment m-2 p-2 {{ comment.userid == Entity.Users.userData.userid and comment.immutable == 0 ? "editable hl-hover" }}' data-id='{{ comment.id }}'>{{ comment.comment|nl2br }}</p>
        </div>
      {% endfor %}

      {# CREATE COMMENT INPUT #}
      <div class='input-group my-1 rounded'>
        <textarea id='commentsCreateArea' class='form-control p-2 brr-none' autocomplete='off' placeholder='{{ 'Add a comment'|trans }}' aria-label='Comment area'></textarea>
        <div class='input-group-append'>
          <button class='btn btn-primary' aria-label='{{ 'Add a comment'|trans }}' type='button' data-action='create-comment'><i class='fas fa-paper-plane text-white'></i></button>
        </div>
      </div>
    </div>
{% endif %}

<div id='info'
    data-page='view'
    data-type='{{ Entity.entityType.value }}'
    data-id='{{ Entity.id }}'
    data-team='{{ App.Users.userData.team }}'
    data-isanon='{{ App.Session.get('is_anon') }}'
>
</div>

{% endblock body %}