{# dim the experiment a bit if it's not yours #}
{% set randomId = random() %}

<section class='entity {{ Entity.entityType.value == 'experiments_templates' ? 'entity-template' }} pl-3 d-flex' id='parent_{{ randomId }}' style='--left-color: #{{ item.category_color|default('bdbdbd') }};' aria-label='{{ 'Entry'|trans }}_{{ randomId }}'>

  {# left part, full height: checkbox #}
  <div class='d-flex align-items-center'>
    {# checkbox #}
    <input autocomplete='off' type='checkbox' data-action='checkbox-entity' data-id='{{ item.id }}' data-randomid='{{ randomId }}' data-type='{{ Entity.entityType.value }}' aria-label='{{ 'Select'|trans }}' class='mr-3' />
    <div class='d-flex'>

      {# for templates: create from button #}
      {% if Entity.entityType.value == 'experiments_templates' %}
      <a data-action='create-entity' data-type='experiments' data-tplid='{{ item.id }}' href='#' class='left-icon rounded mr-3 my-1 hl-hover-gray bgnd-blue' title='{{ 'Create experiment from template'|trans }}' aria-label='{{ 'Create experiment from template'|trans }}'>
        <i class='fas fa-file-circle-plus fa-fw'></i>
      </a>
      {% endif %}
      {# lock icon #}
      {% if item.locked %}
        <div class='left-icon rounded mr-3 my-1 bgnd-gray'>
          <i class='fas fa-lock fa-fw'></i>
        </div>
      {% else %}
        {# edit icon #}
        {% if (item.userid == App.Users.userData.userid or Entity.entityType.value == 'items' or App.Users.isAdmin) %}
          <a href='{{ Entity.entityType.toPage }}?mode=edit&amp;id={{ item.id }}' class='left-icon rounded mr-3 my-1 bgnd-dark' title='{{ 'Edit'|trans }}' aria-label='{{ 'Edit'|trans }}'>
            <i class='fas fa-pencil fa-fw'></i>
          </a>
        {% else %}
        {# eye icon #}
          <a href='{{ Entity.entityType.toPage }}?mode=view&amp;id={{ item.id }}' class='left-icon rounded mr-3 my-1 bgnd-dark' title='{{ 'View'|trans }}' aria-label='{{ 'View'|trans }}'>
            <i class='fas fa-eye fa-fw'></i>
          </a>
        {% endif %}
      {% endif %}
    </div>
  </div>

  {# middle part: category, title, icons and tags #}
  <div>
    {# first line #}
    <div class='my-1'>
      {# timestamp icon #}
      {% if item.timestamped %}
        <i style='color:#{{ item.category_color|default('bdbdbd') }}' class='far fa-calendar-check fa-fw'></i>
      {% endif %}
      {# archived icon #}
      {% if item.state == constant('Elabftw\\Enums\\State::Archived').value %}
        <i class='fas fa-box-archive fa-fw'></i>
      {% endif %}
      {# deleted icon #}
      {% if item.state == constant('Elabftw\\Enums\\State::Deleted').value %}
        <i class='fas fa-ban fa-fw color-danger'></i>
      {% endif %}
      {# category #}
      {% if item.category %}
      {# Note: there might be something to do with mix-blend-mode: difference to get white text on dark bg et vice-versa #}
        <button class='btn catstat-btn category-btn mr-2' type='button' style='--bg: #{{ item.category_color|default('bdbdbd') }};line-height:normal;' data-action='add-query-filter' data-key='category' data-value='{{ item.category|e('html_attr') }}'>{{ item.category_title }}</button>
      {% endif %}
      {# status #}
      {% if item.status %}
        <button class='btn catstat-btn status-btn bg-firstlevel' type='button' data-action='add-query-filter' data-key='status' data-value='{{ item.status|e('html_attr') }}' style='line-height:normal;'><i class='fas fa-circle fa-fw' style='--bg: #{{ item.status_color|default('bdbdbd') }}'></i> {{ item.status_title }}</button>
      {% endif %}
    </div>
    {# end first line #}

    {# second line: title #}
    <div class='d-flex justify-content-between title'>
      <p>
      {% if item.custom_id %}
        <span class='custom-id-badge' title='{{ 'Custom ID'|trans }}'>{{ item.custom_id }}</span>
      {% endif %}
        <a href='{{ Entity.entityType.toPage }}?mode=view&amp;id={{ item.id }}'>{{ item.title }}</a>
      </p>
    </div>
    {# owner #}
    <div class='owner'>
      {% if (Entity.Users.userData.userid != item.userid) and not App.Session.has('is_anon') %}
        {{ 'by'|trans }} <a href='?owner={{ item.userid }}'>{{ item.fullname }}</a>
      {% endif %}
    </div>

    {# end second line #}

    {% if item.next_step|length > 0 %}
      {% set stepsArr = item.next_step|split('|') %}
      {% set next = stepsArr|first %}
      <p class='item-next my-2'>
      <span class='next-step-text'>{{ 'Next step'|trans }}:</span> <span class='item-next-step'>{{ next }}</span>
      </p>
    {% endif %}

    <p class='my-1'>
      {% set itemtagsArr = tagsArr[item.id] %}
      {% if itemtagsArr|length > 0 %}
        <span class='d-inline-flex flex-wrap'><i class='fas fa-tags mr-1 fa-fw'></i>
          {% for tag in itemtagsArr %}
            <a class='tag mathjax-ignore margin-1px {{ tag.is_favorite ? 'favorite' }}' href='{{ Entity.entityType.toPage }}?mode=show&amp;tags%5B%5D={{ tag.tag|url_encode }}'>{{ tag.tag }}</a>
          {% endfor %}
        </span>
      {% endif %}
    </p>

    {# container to hold the body of the entity if it is toggled with the +/- icon #}
    {# a random id is used because with the favorites the item can appear two times on the page so the old blah_123 doesn't work well #}
    {# with a div inside to hold the content, similar to how it is in table mode #}
    <div hidden id='{{ randomId }}' style='overflow:auto;margin: 10px 0 0 20px'><div></div></div>
  </div>

  {# third part: end container #}
  <div class='d-flex justify-content-end ml-auto'>
    {# column for date and icons #}
    <div class='d-flex flex-column ml-auto'>
      {# rating, date and pinned icon #}
      <div>
        {# rating #}
        {% if item.rating > 0 %}
          <span class='rating-show rounded px-1 mr-1 font-weight-bold'><i class='fas fa-star mr-1' title='☻'></i>{{ item.rating }}</span>
        {% endif %}
        <span class='item-date color-medium'>{{ item.date|date('Y-m-d') }}</span>
        {% include 'toggle-pin.html' with {'padding': 1, 'is_pinned': item.is_pinned, 'id': item.id} %}
      </div>
      <div class='ml-auto'>
        {# toggle body #}
        <button type='button' class=' btn p-1 hl-hover-gray' data-type='{{ Entity.entityType.value }}' data-id='{{ item.id }}' data-opened-icon='fa-square-minus' data-closed-icon='fa-square-plus' data-randid={{ randomId }} data-action='toggle-body' title='{{ 'Toggle content'|trans }}' aria-label='{{ 'Toggle content'|trans }}'>
          <i class='fas fa-square-plus fa-fw'></i>
        </button>
      </div>
    </div>
  </div>
</section>