{% include 'storage-view-edit.html' %}
{% include 'compounds-view-edit.html' %}
<div class='row mt-2'>
  {# STEPS #}
  <div class='col-md-12'>
    <h4 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='stepsDiv'><i class='fas fa-caret-down mr-2 fa-fw'></i> {{ 'Steps'|trans }} (<span id='stepsCount'>{{ Entity.entityData.steps|length }}</span>)</h4>
    {# ADD STEP #}
    <div id='stepsDiv' class='mt-2' data-count-for='stepsCount' data-save-hidden='stepsDiv'>
      <div class='sortable' id='steps_div_{{ Entity.id }}' data-axis='y' data-table='{{ Entity.entityType.value ? Entity.entityType.value : 'items_types' }}_steps'>
        {% for step in Entity.entityData.steps %}
          <div class='input-group mb-2 countable' id='step_{{ step.id }}'>
            <div class='input-group-prepend'>
              <button type='button' class='btn draggable sortableHandle input-group-text' title='{{ 'Drag to reorder'|trans }}' aria-label='{{ 'Drag to reorder'|trans }}'>
                <i class='fas fa-sort'></i>
              </button>
            </div>
            <div class='input-group-prepend'>
              <button class='btn input-group-text' data-action='destroy-step' data-id='{{ step.id }}' title='{{ 'Delete'|trans }}' aria-label='{{ 'Delete'|trans }}' type='button'>
                <i class='fas fa-trash-alt'></i>
              </button>
            </div>
            <div class='input-group-prepend'>
              <div class='input-group-text'>
                <input aria-label='{{ 'Toggle completion'|trans }}' type='checkbox' {{ mode == 'edit-template' ? 'disabled' }} {{ step.finished ? 'checked' }} data-stepid='{{ step.id }}' data-id='{{ Entity.id }}' class='stepbox'>
              </div>
            </div>
            <div class='pl-2 step-static form-control-plaintext d-flex flex-wrap'>
              <span class='step editable hl-hover align-self-center {{- step.finished ? ' finished' }}' data-target='body' data-stepid='{{ step.id }}'>{{ step.body }}</span>
              {% if step.finished %}
              <span class='mx-2 text-muted align-self-center'>
                {{ 'completed'|trans }} <span title='{{ step.finished_time }}' class='relative-moment'></span>
              </span>
              {% endif %}
              {% if mode != 'edit-template' %}
                <button class='btn lh-normal hl-hover-gray p-1 ml-auto mr-1' data-action='toggle-next' data-opened-icon='fa-caret-down' data-closed-icon='fa-caret-right' type='button' aria-expanded='false' title='{{ 'More options'|trans }}' aria-label='{{ 'More options'|trans }}'>
                  <i class='fas fa-caret-right fa-fw'></i>
                </button>
                <div hidden data-save-hidden='extendedStep_{{ step.id }}' class='w-100'>
                {{ 'Completion time:'|trans }}
                {% if step.finished %}
                  <span data-stepid='{{ step.id }}' data-target='finished_time' data-ma-type='datetime-local' data-ma-input-value='{{ step.finished_time|date('Y-m-d\\TH:i') }}' class='step editable p-1 rounded hl-hover'>{{ step.finished_time|format_datetime() }}</span>
                {% else %}
                  {{ 'Not finished'|trans }}
                {% endif %}
                <br>

                <div id='stepDeadlineDiv_{{ step.id }}'>
                  {% if step.deadline %}
                    {{ 'Deadline:'|trans }}
                    {# here the data-ma-input-value is formatted so it works with the datetime-local input type, and the displayed one is formatted differently to be more readable #}
                    <span data-stepid='{{ step.id }}' data-target='deadline' data-ma-type='datetime-local' data-ma-input-value='{{ step.deadline|date('Y-m-d\\TH:i') }}' class='step editable hl-hover-gray p-1 rounded'>{{ step.deadline|format_datetime() }}</span>
                    {# notification bell is only shown if the user has at least one notification setting activated for that type of notif #}
                    {% if App.Users.userData.notif_step_deadline or App.Users.userData.notif_step_deadline_email %}
                      <button class='btn my-n1 hl-hover-gray p-1 lh-normal border-0' data-action='step-toggle-deadline-notif' data-stepid='{{ step.id }}' title='{{ 'Toggle notifications'|trans }}' aria-label='{{ 'Toggle notifications'|trans }}'>
                        <i class='far fa-bell {{- step.deadline_notif ? ' active' }}'></i>
                      </button>
                    {% endif %}
                    <button class='btn my-n1 hl-hover-gray p-1 lh-normal border-0' data-action='step-destroy-deadline' data-stepid='{{ step.id }}' title='{{ 'Clear deadline'|trans }}' aria-label='{{ 'Clear deadline'|trans }}'>
                      <i class='fas fa-trash-alt'></i>
                    </span>
                  {% else %}
                    <button data-action='replace-with-next' type='button' class='btn btn-sm btn-secondary'>{{ 'Add a deadline'|trans }}</button>
                    <div hidden class='input-group'>
                      <select class='custom-select col-md-3' id='stepSelectDeadline_{{ step.id }}'>
                        <option disabled>{{ 'Set deadline in'|trans }}</option>
                        <option value='{{ '+1 hour'|toDatetime }}'>{{ '%d hour'|trans|format(1) }}</option>
                        <option value='{{ '+1 day'|toDatetime }}'>{{ '%d day'|trans|format(1) }}</option>
                        <option value='{{ '+1 week'|toDatetime }}'>{{ '%d week'|trans|format(1) }}</option>
                        <option value='{{ '+1 month'|toDatetime }}'>{{ '%d month'|trans|format(1) }}</option>
                        <option value='{{ '+1 year'|toDatetime }}'>{{ '%d year'|trans|format(1) }}</option>
                      </select>
                      <div class='input-group-append'>
                        <button class='btn btn-primary' type='button' data-action='step-update-deadline' data-stepid='{{ step.id }}'>{{ 'Save'|trans }}</button>
                      </div>
                    </div>
                  {% endif %}
                  </div>
                  <div data-action='import-step-body' data-stepid='{{ step.id }}'><i class='fas fa-file-import'></i> {{ 'Copy step to cursor position'|trans }}</div>
                </div>
              {% endif %}
            </div>
          </div>
        {% endfor %}
      </div>
      {# Add step input #}
      <div class='input-group mt-4'>
        <input aria-label='{{ 'Add a step'|trans }}' type='text' size='60' class='form-control stepinput' data-id='{{ Entity.id }}' />
        <div class='input-group-append'>
          <button class='btn btn-primary' data-action='create-step' type='submit'>{{ 'Add a step'|trans }}</button>
        </div>
      </div>
    </div>
    <hr>
  </div>


  {# LINKS #}
  {# EXPERIMENTS LINKS #}
  <div class='col-md-12'>
    <h4 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='linksExpDiv'><i class='fas fa-caret-down mr-2 fa-fw'></i>{% trans %}
    Linked experiment
    {% plural 2 %}
    Linked experiments
    {% endtrans %} (<span id='experimentsLinksCount'>{{ Entity.entityData.experiments_links|length }}</span>)</h4>
    {# display experiments links #}
    <div class='row mt-2' data-count-for='experimentsLinksCount' data-save-hidden='linksExpDiv' id='linksExpDiv'>
      {% if Entity.entityData.experiments_links %}
        {% for link in Entity.entityData.experiments_links %}
          {% include 'link-view-one.html' %}
        {% endfor %}
      {% endif %}
      {# ADD LINK #}
      <div class='ml-3 input-group mt-2'>
        <div class='input-group-prepend'>
          <span class='input-group-text'><i class='fas fa-magnifying-glass'></i></span>
        </div>
        <div class='input-group-prepend' style='max-width:33%;'>
          <select id='addLinkOwnerFilter' class='brl-none brr-none form-control' aria-label='Limit author'>
            <option selected value=''>{{ 'Any author'|trans }}</option>
            {% for user in usersArr %}
              <option value='{{ user.userid }}'>{{ user.fullname }}</option>
            {% endfor %}
          </select>
        </div>
        <input aria-label='{{ 'Add a link'|trans }}' type='text' data-endpoint='experiments_links' id='addLinkExpInput' class='form-control linkinput' data-id='{{ Entity.id }}' placeholder='{{ 'Search in experiments'|trans }}' />
        <div class='input-group-append'>
          <button class='btn btn-primary' type='button'>{{ 'Add'|trans }}</button>
        </div>
      </div>
    </div>
    <hr>
  </div>

  {# ITEMS LINKS #}
  <div class='col-md-12'>
    <h4 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='linksDiv'><i class='fas fa-caret-down mr-2 fa-fw'></i> {{ 'Linked resources'|trans }} (<span id='itemsLinksCount'>{{ Entity.entityData.items_links|length }}</span>)</h4>
    {# DISPLAY ITEMS LINKS #}
    <div class='row mt-2' data-count-for='itemsLinksCount' data-save-hidden='linksDiv' id='linksDiv'>
      {% if Entity.entityData.items_links %}
        {% for link in Entity.entityData.items_links %}
          {% include 'link-view-one.html' %}
        {% endfor %}
      {% endif %}
      {# ADD LINK #}
      <div class='ml-3 input-group mt-2'>
        <div class='input-group-prepend'>
          <span class='input-group-text'><i class='fas fa-magnifying-glass'></i></span>
        </div>
        <div class='input-group-prepend' style='min-width: 10%;max-width:33%;'>
          <select id='addLinkCatFilter' class='brr-none brl-none form-control' aria-label='{{ 'Limit category'|trans }}'>
            <option selected value=''>{{ 'Any category'|trans }}</option>
            {% for cat in itemsCategoryArr %}
              <option value='{{ cat.id }}'>{{ cat.title }}</option>
            {% endfor %}
          </select>
        </div>
        <input aria-label='{{ 'Add a link'|trans }}' type='text' data-endpoint='items_links' id='addLinkItemsInput' class='form-control linkinput' data-id='{{ Entity.id }}' placeholder='{{ 'Search in resources'|trans }}' />
        <div class='input-group-append'>
          <button class='btn btn-primary' type='button'>{{ 'Add'|trans }}</button>
        </div>
      </div>
    </div>
    <hr>
  </div>
</div>

{% include 'related-snippet.html' %}