{% extends 'base.html' %}
{% block header %}
<div class="field label prefix border max">
  <i>search</i>
  <input type="text" id="search-bar">
  <label>Search</label>
  <i class="front" style="visibility: hidden" id="search-clear" onclick="document.getElementById('search-bar').value = ''; Search('')">close</i>
</div>

<button class="transparent square" data-ui="#add-drink">
  <i>add</i>
</button>
{% endblock %}

{% block content %}

<!-- Search -->

<script>
  const searchBar = document.getElementById('search-bar');

  function removeDiacritics(str) {
    return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
  }

  function Search(value) {
    const drinks = document.getElementById('drinks').children;
    const normalizedValue = removeDiacritics(value.toLowerCase());

    document.getElementById('search-clear').style.visibility = value.length > 0 ? '' : 'hidden';

    // Loop through all list items and hide those that don't match the filter
    for (let i = 0; i < drinks.length; i++) {
      const itemText = removeDiacritics(drinks[i].textContent.toLowerCase());
      // Show item if it matches the filter, hide otherwise
      if (itemText.includes(normalizedValue)) {
        drinks[i].style.display = '';
      } else {
        drinks[i].style.display = 'none';
      }
    }
  }

  searchBar.addEventListener('input', function() {
    Search(this.value)
});
</script>

<!-- Drinks -->

<div class="grid" id="drinks">

  {% for drink in drinks %}

  <div id="drink" class="s12 l6">

    <article class="no-padding">
      <div class="grid no-space">
        {% if drink.picture %}
        <div class="s6">
          <img class="responsive" src="{{ drink.picture.url }}">
        </div>
        {% endif %}
        <div class="s6">
          <div class="padding">
            <h4 class="drink-name">{{ drink.name }}</h4>

            {% if drink.author %}
            <button class="circle drink-author" style="background-color: hsl({{ drink.author.color }}deg 80% 40%);">
              {{ drink.author }}
              <div class="tooltip max bottom" style="width: fit-content">
                <b>Author</b>
                <p>{{ drink.author.name }}</p>
              </div>
            </button>
            {% endif%}

            <p>{{ drink.description }}</p>

            {% if drink.ingredient_set.all %}
            <h5>Ingredients</h5>
            <ul>
              {% for ingredient in drink.ingredient_set.all %}
              <li>{{ ingredient.name }}</li>
              {% endfor %}
            </ul>
            {% endif %}

            <nav>
              <button class="border round dispense-drink">Dispense drink</button>
            </nav>
          </div>
        </div>
      </div>
    </article>
  </div>
  {% endfor %}
</div>

<!-- Add drink modal -->

<div class="overlay blur"></div>
<dialog id="add-drink">
  <h5>Add drink</h5>
  <fieldset>
    <legend>Fill all fields</legend>
    <div class="row">
      <div class="max">
        <div class="field border label max">
          <input>
          <label>Input</label>
        </div>
      </div>
      <div class="max">
        <div class="field border label">
          <select>
            <option>Item 1</option>
            <option>Item 2</option>
            <option>Item 3</option>
          </select>
          <label>Select</label>
        </div>
      </div>
    </div>
  </fieldset>

  <nav class="right-align no-space">
    <button class="transparent link">Cancel</button>
    <button class="transparent link">Confirm</button>
  </nav>
</dialog>

{% endblock %}