{% 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-circle-left mr-1 link-like'></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-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-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>

<section class='box' id='main_section' style='border-left: 6px solid #{{ Entity.entityData.color }}'>
  <div class='dropdown'>
    <i data-toggle='dropdown' aria-haspopup='true' aria-expanded='false' class='dropdown-toggle fas fa-ellipsis-h fa-2x fa-pull-right clickable' title='{{ 'More options'|trans }}' aria-label='{{ 'More options'|trans }}' role='button'></i>
    <div class='dropdown-menu' aria-label='{{ 'More options'|trans }}'>
      <!-- MANAGE PERMISSIONS -->
      {% if Entity.type == 'items' or Entity.entityData.userid == App.Users.userData.userid %}
        <a class='dropdown-item modalToggle' data-modal='permModal' href='#'><i class='fas fa-share-alt' title='{{ 'Manage Permissions'|trans }}'></i> {{ 'Manage Permissions'|trans }}</a>
      {% endif %}
      <!-- SWITCH EDITOR -->
      <a class='dropdown-item switchEditor' id='iHazEditor' data-editor='{{ editor }}' href='#'><i class='fas fa-pencil-alt'></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'></i> {{ revNum }} {% trans %}revision available{% plural revNum %}revisions available{% endtrans %}</a>
      {% endif %}

      <div class='dropdown-divider'></div>
      <a class='dropdown-item entityDestroy hover-danger' href='#'><i class='fas fa-trash-alt' title='{{ 'Delete'|trans }}'></i> {{ 'Delete'|trans }}</a>
    </div>
  </div>

    <!-- TAGS -->
    <i class='fas fa-tags mr-1'></i><label for='createTagInput'>{{ 'Tags'|trans }}</label>
    <div class='tags'>
      <span id='tags_div_{{ Entity.id }}'>
        <!--  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 %}
            <span class='tag m-1 clickable'>
              <a class='tag-delete tagUnreference' data-tagid='{{ tagsIdArr[loop.index0] }}' data-id='{{ Entity.id }}'>
                {{ tag|raw }}
              </a>
            </span>
          {% endfor %}
        {% endif %}
      </span>
      <input type='text' id='createTagInput' data-id='{{ Entity.id }}' class='createTagInput mb-2' placeholder='{{ 'Add a tag'|trans }}' />
    </div>

    <!--  MAIN FORM -->
    <form id='main_form' method='post' action='app/controllers/EntityController.php' enctype='multipart/form-data'>
        <input name='update' type='hidden' value='true' />
        {{ App.Csrf.getHiddenInput|raw }}
        <input name='id' type='hidden' value='{{ Entity.id }}' />
        <input name='type' type='hidden' value='{{ Entity.type }}' />

            <div class='row'>
                <!-- DATE -->
                <div class='col-md-3'>
                    <i class='far fa-calendar-alt mr-1'></i><label for='datepicker'>{{ 'Date'|trans }}</label>
                    <!-- if firefox has support for it: type = date -->
                    <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=825294 -->
                    <input name='date' id='datepicker' size='8' type='text' value='{{ Entity.entityData.date }}' />
                </div>

                <!-- CATEGORIES (status for exp and itemstypes for items) -->
                <div class='col-md-3'>
                    <i class='fas fa-clipboard-check'></i>
                    <label for='category_select'>
                    {% if Entity.type == 'experiments' %}
                    {{ 'Status'|trans }}
                    {% else %}
                    {{ 'Category'|trans }}
                    {% endif %}
                    </label>
                    <select id='category_select'>
                        {% for category in categoryArr %}
                            <option value='{{ category.category_id }}'
                            {{ Entity.entityData.category_id == category.category_id ? ' selected' }}>{{ category.category }}</option>
                        {% endfor %}
                    </select>
                </div>
                {% if Entity.type == 'items' %}
                    <!-- STAR RATING -->
                    <div class='col-md-3' style='margin-top:15px'>
                        {% for i in range(1, 5) %}
                        <input data-rating='{{ i }}' name='star' type='radio' class='star' value='{{ i }}' {{ Entity.entityData.rating == i ? ' checked=checked' }} />
                        {% endfor %}
                    </div>
                {% endif %}

            </div>
            <!-- TITLE -->
            <h4>{{ 'Title'|trans }}</h4>
            <input id='title_input' type='text' name='title' value='{{ Entity.entityData.title|raw }}' required />

            <!-- BODY -->
            {% if Entity.type == 'experiments' %}
            <h4>{% trans %}Experiment{% plural 1 %}Experiments{% endtrans %}</h4>
            {% else %}
                <h4>{{ 'Information'|trans }}</h4>
            {% endif %}


            {% if editor == 'md' %}
                    <textarea id='body_area' class='markdown-textarea' data-language='{{ lang }}' name='body'>{{ Entity.entityData.body|raw }}</textarea>
            {% else %}
                <textarea id='body_area' class='mceditable invisible' name='body' rows='15' cols='80'>{{ Entity.entityData.body|raw }}</textarea>
            {% endif %}

            <div class='submitButtonDiv'>
                <button type='submit' name='Submit' class='button btn btn-primary'>{{ 'Save and go back'|trans }}</button>
            </div>
        </form>

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

<!-- UPLOAD FORM -->
<section class='box'>
    <i class='fas 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') }}

{% if Entity.Users.userData.json_editor %}
  {{ include('json-editor.html') }}
{% endif %}

<!-- DOODLE -->
<section class='box' id='doodle-anchor'>
  <i class='fas fa-paint-brush mr-1 align-baseline'></i><h3 class='d-inline'>{{ 'Draw something'|trans }}</h3>
  <button class='button btn btn-primary plusMinusButton' data-toggle='collapse' data-target='#doodleDiv' aria-expanded='false' aria-controls='doodleDiv'>+</button>
  <div id='doodleDiv' class='collapse mt-2'>
    <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'>
        <p>
          <label for='doodleStrokeWidth'>{{ 'Stroke width'|trans }}</label>
          <input type='range' min='1' max='20' name='strokeWidth' value='5' id='doodleStrokeWidth' />
        </p>

        <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 class='button btn btn-danger clearCanvas'>{{ 'Clear'|trans }}</button>
          <button class='button btn btn-primary saveCanvas' data-type='{{ Entity.type }}' data-id='{{ Entity.id }}'>{{ 'Save'|trans }}</button>
        <p>
      </div>
    </div>
  </div>
</section>

<!-- CHEM EDITOR -->
{% if Entity.Users.userData.chem_editor %}
  <div class='box chemdoodle'>
    <i class='fas fa-dna mr-1 align-baseline'></i><h3 class='d-inline'>{{ 'Molecule drawer'|trans }}</h3>
    <button class='button btn btn-primary plusMinusButton' data-toggle='collapse' data-target='#chemDiv' aria-expanded='false' aria-controls='chemDiv'>+</button>
    <div id='chemDiv' class='collapse mt-2 text-center'>
      <script src='app/js/chemdoodle-canvas.min.js?v={{ v }}'></script>
    </div>
  </div>
{% endif %}

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

{% endblock body %}