{% extends 'base.html' %}

{% block body %}
{# tinymce or markdown? #}
{% set editor = 'tiny' %}
{% if Entity.Users.userData.use_markdown or App.Request.query.get('editor') == 'md' %}
  {% set editor = 'md' %}
{% endif %}
{% if App.Request.query.get('editor') == 'tiny' %}
  {% set editor = 'tiny' %}
{% endif %}


{% embed 'view-edit.html' %}
  {% block backtoview %}
    <a href='?mode=view&id={{ Entity.id }}'>
      <i class='fas fa-chevron-left mr-1'></i>{{ 'View mode'|trans }}
    </a>
  {% endblock %}
  {% block createnew %}
    {% include 'create-new.html' %}
  {% endblock %}
  {% block createmodal %}
    {% include 'show-view-edit.html' %}
  {% endblock %}
{% endembed %}

<!-- Modal for edit permissions -->
<div class='modal fade' id='permModal' tabindex='-1' role='dialog' aria-labelledby='permModalLabel' aria-hidden='true'>
  <div class='modal-dialog' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title' id='permModalLabel'>{{ 'Edit permissions'|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'>
        <!-- CAN READ -->
        <div class='form-group'>
        <i class='fas fa-fw fa-eye' title='Visibility'></i>
        <label for='canread_select'>{{ 'Visibility'|trans }}</label>
        <select id='canread_select' class='permissionSelect form-control' data-rw='read'>
          {% for key, value in visibilityArr %}
            <option value='{{ key }}'
            {{ Entity.entityData.canread == key ? ' selected' }}
            >{{ value|trans }}</option>
          {% endfor %}
        </select>
        <!-- CAN WRITE -->
        <i class='fas fa-fw fa-pencil-alt' title='Can write'></i>
        <label for='canwrite_select'>{{ 'Can write'|trans }}</label>
        <select id='canwrite_select' class='permissionSelect form-control' data-rw='write'>
          {% for key, value in visibilityArr %}
            <option value='{{ key }}'
            {{ Entity.entityData.canwrite == key ? ' selected' }}
            >{{ value|trans }}</option>
          {% endfor %}
        </select>
        </div>
      </div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-secondary' data-dismiss='modal'>{{ 'Close'|trans }}</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal for ownership transfer -->
<div class='modal fade' id='ownerModal' tabindex='-1' role='dialog' aria-labelledby='ownerModalLabel' aria-hidden='true'>
  <div class='modal-dialog' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title' id='ownerModalLabel'>{{ 'Transfer ownership'|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'>
        <!-- SELECT USER -->
        <label for='new_owner'>{{ 'New owner'|trans }}</label>
        <select id='new_owner' class='form-control'>
          {% for user in Entity.Users.readAllFromTeam %}
            <option value='{{ user.userid }}'
            {{ Entity.entityData.userid == user.userid ? ' selected' }}
            >{{ user.fullname|raw }}</option>
          {% endfor %}
        </select>
      </div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-secondary' data-dismiss='modal'>{{ 'Close'|trans }}</button>
      </div>
    </div>
  </div>
</div>

<!-- show message if it was recently modified -->
{% set lastchangeDiff = 'now'|date('U') - Entity.entityData.lastchange|date('U') %}
{% if (lastchangeDiff < 600) and not Entity.entityData.lastchangeby is null and Entity.entityData.lastchangeby != Entity.Users.userData.userid %}
  {{ 'Warning: this entry was modified %s seconds ago by %s.'|trans|format(lastchangeDiff, lastModifierFullname)|msg('warning', false) }}
{% endif %}

<section class='box' id='main_section' style='border-left: 6px solid #{{ Entity.entityData.color }}'>
  <div class='dropdown'>
    <a class='clickable float-right' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false' title='{{ 'More options'|trans }}' aria-label='{{ 'More options'|trans }}' role='button'>
      <i class='fas fa-ellipsis-v fa-2x'></i>
    </a>
    <div class='dropdown-menu dropdown-menu-right' aria-label='{{ 'More options'|trans }}'>
      <!-- MANAGE PERMISSIONS -->
      <a class='dropdown-item' data-action='toggle-modal' data-target='permModal'><i class='fas fa-share-alt fa-fw' title='{{ 'Manage Permissions'|trans }}'></i> {{ 'Manage Permissions'|trans }}</a>
      <!-- TRANSFER OWNERSHIP -->
      {% if Entity.type == 'items' and (Entity.entityData.userid == App.Users.userData.userid or App.Session.get('is_admin')) %}
        <a class='dropdown-item' data-action='toggle-modal' data-target='ownerModal'><i class='fas fa-people-arrows fa-fw' title='{{ 'Manage Permissions'|trans }}'></i> {{ 'Transfer ownership'|trans }}</a>
      {% endif %}
      <!-- SWITCH EDITOR the data-editor is here to indicate which is the current editor -->
      <a class='dropdown-item' id='iHazEditor' data-action='switch-editor' data-editor='{{ editor }}' href='#'><i class='fas fa-pencil-alt fa-fw'></i> {{ 'Switch editor'|trans }}</a>
      <!-- REVISIONS -->
      {% if revNum > 0 %}
        <a class='dropdown-item' href='revisions.php?type={{ Entity.type }}&item_id={{ Entity.id }}'><i class='fas fa-history fa-fw'></i> {{ revNum }} {% trans %}revision available{% plural revNum %}revisions available{% endtrans %}</a>
      {% endif %}

      <div class='dropdown-divider'></div>
      <a class='dropdown-item hover-danger {{ not deletableXp and (Entity.type == 'experiments') ? 'disabled' }}' href='#' data-action='destroy'><i class='fas fa-trash-alt fa-fw' title='{{ 'Delete'|trans }}'></i> {{ 'Delete'|trans }}</a>
    </div>
  </div>

  <!-- DATE -->
  <div class='row mb-2 form-inline'>
    <i class='far fa-calendar-alt mr-1 fa-fw'></i><label for='date_input'>{{ 'Started on'|trans }}</label>
    <!-- the input expects date in YYYY-MM-DD format, and it will be displayed according to the browser's locale -->
    <input name='date' id='date_input' type='date' value='{{ Entity.entityData.date|date('Y-m-d') }}' class='form-control px-2' />
  </div>

  <div class='row align-items-center'>
    <!-- CATEGORIES (status for exp and itemstypes for items) -->
    <div class='col-md-4 mb-2 form-inline'>
      <i class='fas fa-clipboard-check fa-fw mr-1'></i>
      <label for='category_select'>
      {% if Entity.type == 'experiments' %}
        {% trans %}Status{% plural 1 %}Status{% endtrans %}
      {% else %}
        {{ 'Category'|trans }}
      {% endif %}
      </label>
      <select id='category_select' class='form-control'>
        {% for category in categoryArr %}
          <option value='{{ category.category_id }}'
          {{ Entity.entityData.category_id == category.category_id ? ' selected' }}>{{ category.category }}</option>
        {% endfor %}
      </select>
    </div>
    <!-- STAR RATING -->
    <div class='col-md-3 mb-2'>
      <fieldset>
        <legend class='sr-only'>{{ 'Rating'|trans }}</legend>
        {% for i in range(1, 5) %}
        <input aria-label='{{ 'Rating'|trans }}' data-rating='{{ i }}' name='star' type='radio' class='star' value='{{ i }}' {{ Entity.entityData.rating == i ? ' checked=checked' }} />
        {% endfor %}
      </fieldset>
    </div>
  </div>

  <!-- TITLE -->
  <label for='title_input'>{{ 'Title'|trans }}</label>
  <input id='title_input' class='form-control' type='text' name='title' value='{{ Entity.entityData.title|raw }}' required />

  <!-- TAGS -->
  <div class='row mb-2 mathjax-ignore'>
    <div class='col'>
      <i class='fas fa-tags fa-fw mr-1'></i><label for='createTagInput'>{{ 'Tags'|trans }}</label>
      <div class='tags form-inline'>
        <div id='tags_div_{{ Entity.id }}' class='mb-2 mb-sm-0'>
          <!--  build the tag array -->
          {% if Entity.entityData.tags|length > 0 %}
            {% set tagsIdArr = Entity.entityData.tags_id|split(',') %}
            {% set tagsValueArr = Entity.entityData.tags|split('|') %}
            {% for tag in tagsValueArr -%}
              <a class='tag mr-1 hover-danger' data-action='unreference-tag' data-tagid='{{ tagsIdArr[loop.index0] }}'>{{ tag|raw }}</a>
            {%- endfor -%}
          {% endif %}
        </div>
        <input type='text' id='createTagInput' data-autocomplete='tags' class='createTagInput form-control' placeholder='{{ 'Add a tag'|trans }}' />
      </div>
    </div>
  </div>

  <!-- BODY -->
  {% if editor == 'md' %}
  <textarea aria-label='{{ 'Main content'|trans }}' id='body_area' class='markdown-textarea' data-language='{{ lang }}' name='body'>{{ Entity.entityData.body }}</textarea>
  {% else %}
  <div><!-- << this div is added around the textarea to fix an issue on mobile editor. See #3107 -->
    <textarea aria-label='{{ 'Main content'|trans }}' id='body_area' class='mceditable invisible' name='body' rows='15' cols='80'>{{ Entity.entityData.body }}</textarea>
  </div>
  {% endif %}

  <div class='mt-4 text-center'>
    <button data-action='update-entity-body' class='button btn btn-primary'>{{ 'Save'|trans }}</button>
    <button data-action='update-entity-body' data-redirect='view' class='button btn btn-primary'>{{ 'Save and go back'|trans }}</button>
  </div>

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

  {% include 'steps-links-edit.html' %}
</section>

<!-- UPLOAD FORM -->
<section class='box'>
  <i class='fas fa-fw fa-paperclip mr-1 align-baseline'></i><h3 class='d-inline'>{{ 'Attach a file'|trans }}</h3>
  <form action='app/controllers/EntityAjaxController.php' class='dropzone' id='elabftw-dropzone'></form>
</section>

{% include 'uploads.html' %}

{% include 'json-editor.html' %}

<!-- DOODLE -->
<section class='box'>
  <h3 data-action='toggle-next' data-icon='doodleDivIcon' class='d-inline'><i id='doodleDivIcon' class='fas fa-chevron-circle-down'></i> <i class='fas fa-fw fa-paint-brush'></i> {{ 'Draw something'|trans }}</h3>
  <div id='doodleDiv' hidden class='mt-2' data-save-hidden='doodleDiv'>
    <div class='row'>
      <div>
        <canvas class='doodle' id='doodleCanvas' width='600' height='600'></canvas>
      </div>

      <div class='col-xs-12 col-sm-6 col-md-4 col-lg-4' id='doodle_controls'>
        <div id='doodleStrokeWidthContainer'>
          <label for='doodleStrokeWidth'>{{ 'Stroke width'|trans }}</label>
          <input type='range' min='1' max='20' name='strokeWidth' value='5' id='doodleStrokeWidth' />
        </div>

        <p>
          <label for='doodleStrokeStyle'>{{ 'Color'|trans }}</label>
          <input type='color' name='strokeStyle' value='#29aeb9' id='doodleStrokeStyle' />
        </p>

        <p>
          <input type='checkbox' id='doodleEraser' /> <label for='doodleEraser'>{{ 'Eraser'|trans }}</label>
        </p>

        <p>
          <button id='clearCanvas' class='button btn btn-danger'>{{ 'Clear'|trans }}</button>
          <button id='saveCanvas' class='button btn btn-primary' data-type='{{ Entity.type }}' data-id='{{ Entity.id }}'>{{ 'Save'|trans }}</button>
        <p>
        <p>{{ 'Use %sCtrl%s + click to add text'|trans|format('<kbd>', '</kbd>')|raw }}</p>
      </div>
    </div>
  </div>
</section>

<!-- CHEM EDITOR -->
{% if Entity.Users.userData.chem_editor %}
  <div class='box chemdoodle'>
    <h3 data-action='toggle-next' data-icon='chemDivIcon' class='d-inline'><i id='chemDivIcon' class='fas fa-chevron-circle-down'></i> <i class='fas fa-fw fa-dna'></i> {{ 'Molecule drawer'|trans }}</h3>
    <div id='chemDiv' hidden data-save-hidden='chemDiv' class='mt-2 text-center'>
      <script src='assets/chemdoodle-canvas.bundle.js?v={{ v }}'></script>
    </div>
  </div>
{% endif %}

<div id='info'
    data-page='edit'
    data-maxsize='{{ maxUploadSize }}'
    data-type='{{ Entity.type }}'
    data-id='{{ Entity.id }}'
    data-scsubmit='{{ Entity.Users.userData.sc_submit }}'>
</div>
<div id='shortcuts'
    data-create='{{ Entity.Users.userData.sc_create }}'>
</div>

{% endblock body %}