{% extends 'base.html' %}

{% block title %}
<div class='d-flex'>
  <h1 id='pageTitle'>{{ pageTitle }}</h1>
  <a class='ml-auto' href='/api/v2/reports?scope=inventory&format=csv'>
    <button class='btn btn-secondary' data-action='get-inventory-csv'>{{ 'Export'|trans }}</button>
  </a>
</div>
<hr>
{% endblock title %}

{% block body %}
  <div class='pl-3 mb-5'>
    <h4><label for='storageSearchInput'>{{ 'Search containers or places'|trans }}</label></h4>
    <form class='input-group' method='get'>
      {% set containerSearchPlaceholder = ['Sodium', 'Saccharose', 'Acetone', 'CK-666', 'Fibronectin'] %}
      <input class='form-control' name='q' id='storageSearchInput' placeholder='{{ random(containerSearchPlaceholder) }}' value='{{ App.Request.query.getString('q') }}' />
      <div class='input-group-append'>
        <button class='btn btn-primary' type='submit' data-action='search-storage'>{{ 'Search'|trans }}</button>
      </div>
    </form>

    {% if containersArr|length == 0 and App.Request.query.has('q') %}
      {{ 'No results found'|trans|msg('warning', false) }}
    {% endif %}

    <ul class='list-group mt-2'>
    {% for container in containersArr %}
      <li class='list-group-item'>
        <a href='{{ container.page }}.php?mode=view&id={{ container.entity_id }}'>{{ container.entity_title }}</a> {{ container.qty_stored }} {{ container.qty_unit }} in {{ container.full_path }}
      </li>
    {% endfor %}
    </ul>
  </div>

  <div class='pl-3 mb-5'>
    <h4>{{ 'Browse places'|trans }}</h4>
    {% include 'storage-list.html' with {'storage_editable': true} %}
  </div>
{% endblock body %}