{% extends 'base.html' %}

{% block body %}

{% include('view-edit.html') %}
<!-- WYSIWYG editor -->
<script src='app/js/tinymce.bundle.js?v={{ v }}'></script>
<!-- upload files form -->
<script src='app/js/dropzone.min.js?v={{ v }}'></script>
<!-- add moment lib -->
<script src='app/js/moment.bundle.js?v={{ v }}'></script>
<script src='app/js/relative-moment.min.js?v={{ v }}'></script>

<section class='box' id='main_section' style='border-left: 6px solid #{{ Entity.entityData.color }}'>
    <i class='fas fa-trash-alt fa-2x fa-pull-right clickable entityDestroy' title='Delete' /></i>

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

                <!-- VISIBILITY -->
                <div class='col-md-3'>
                    <i class='fas fa-eye' title='Visibility'></i>
                    <label for='visibility_select'>{{ 'Visibility'|trans }}</label>
                    <select id='visibility_select'>
                        {% for key, value in visibilityArr %}
                            <option value='{{ key }}'
                            {{ Entity.entityData.visibility == key ? ' selected' }}
                            >{{ value|trans }}</option>
                        {% endfor %}
                    </select>
                </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' rows='1' value='{{ Entity.entityData.title|raw }}' required />

            <!-- 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 %}

            <p class='align_right inline switchEditor' id='iHazEditor' data-editor='{{ editor }}'><a href='#'>{{ 'Switch editor' }}</a></p>
            {% 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' name='body' rows='15' cols='80'>{{ Entity.entityData.body|raw }}</textarea>
            {% endif %}

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

    <!-- REVISIONS -->
    {% if revNum > 0 %}
        <span class='align_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 %}

    {% 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') }}

<!-- 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 show-hide' data-type='doodle'>+</button>
  <div class='canvasDiv'>
    <div class='row'>
      <div>
        <canvas class='doodle' id='doodleCanvas' width='600px' height='600px'></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 }}
        </p>

        <p>
          <button class='button button-delete clearCanvas'>{{ 'Clear'|trans }}</button>
          <button class='button 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 show-hide' data-type='chem'>+</button>
            <div class='text-center' style='display:none' id='chem_editor'>
                <script src='app/js/chemdoodle-canvas.min.js?v={{ v }}'></script>
            </div>
          </div>
        </div>
    </div>
{% endif %}

{% if Entity.Users.userData.close_warning %}
    <script src='app/js/close-warning.min.js?v={{ v }}'></script>
{% endif %}
<div id='info'
    data-upmsg='{{ 'Drop files here to upload'|trans }}'
    data-maxsize='{{ maxUploadSize }}'
    data-type='{{ Entity.type }}'
    data-id='{{ Entity.id }}'
    data-locale='{{ App.Users.userData.lang }}'
    data-confirm="{{ 'The selected item(s) and all associated data will be permanently deleted. This cannot be undone. Are you sure?'|trans }}"
    data-confirmtag="{{ 'Delete this tag?'|trans }}"
    data-confirmstep="{{ 'Delete this step?'|trans }}"
    data-confirmlink="{{ 'Delete this link?'|trans }}"
    data-untitled="{{ 'Untitled'|trans }}"
    data-lang="{{ Entity.Users.userData.lang }}">
</div>
<div id='shortcuts'
    data-create='{{ Entity.Users.userData.sc_create }}'
    data-submit='{{ Entity.Users.userData.sc_submit }}'>
</div>

{% if App.Config.configArr.debug %}
  <script src='app/js/src/edit.js?v={{ v }}'></script>
  <script src='app/js/src/tags.js'></script>
  <script src='app/js/src/doodle.js?v={{ v }}'></script>
  <script src='app/js/src/steps-links.js?v={{ v }}'></script>
{% else %}
  <script src='app/js/edit.min.js?v={{ v }}'></script>
  <script src='app/js/tags.min.js'></script>
  <script src='app/js/doodle.min.js?v={{ v }}'></script>
  <script src='app/js/steps-links.min.js?v={{ v }}'></script>
{% endif %}

{% endblock body %}