{% extends "base_search.html" %}
{% comment %}
Copyright (C) 2018-2025 by BDE ENS Paris-Saclay
SPDX-License-Identifier: GPL-3.0-or-later
{% endcomment %}
{% load render_table from django_tables2 %}
{% load i18n %}

{% block content %}
<div class="card bg-light">
  <h3 class="card-header text-center">
      {{ title }}
  </h3>
  <div class="card-body">
    <style>
      input[type=number]::-webkit-inner-spin-button,
      input[type=number]::-webkit-outer-spin-button {
          -webkit-appearance: none;
          margin: 0;
      }
      input[type=number] {
          appearance: textfield;
          padding: 6px;
          border: 1px solid #ccc;
          border-radius: 4px;
          width: 100px;
      }
    </style>
    <div class="d-flex align-items-center" style="max-width: 300px;">
      <form method="get" action="{% url 'food:redirect_view' %}" class="d-flex w-100">
        <input type="number" name="slug" placeholder="QR-code" required class="form-control form-control-sm" style="max-width: 120px;">
        <button type="submit" class="btn btn-sm btn-primary">{% trans "View food" %}</button>
      </form>
    </div>
  </div>
  <div class="card-body">
      <input id="searchbar" type="text" class="form-control"
          placeholder="{% trans "Search by attribute such as name..." %}">
  </div>

  {% block extra_inside_card %}
  {% endblock %}

  <div id="dynamic-table">
      {% if table.data %}
      {% render_table table %}
      {% else %}
      <div class="card-body">
          <div class="alert alert-warning">
              {% trans "There is no results." %}
          </div>
      </div>
      {% endif %}
  </div>
</div>
<br>
<div class="card bg-light mb-3">
  <h3 class="card-header text-center">
    {% trans "Meal served" %}
  </h3>
  {% if can_add_meal %}
  <div class="card-footer">
    <a class="btn btn-sm btn-primary" href="{% url 'food:transformedfood_create' %}">
      {% trans "New meal" %}
    </a>
  </div>
  {% endif %}
  {% if served.data %}
  {% render_table served %}
  {% else %}
  <div class="card-body">
    <div class="alert alert-warning">
      {% trans "There is no meal served." %}
    </div>
  </div>
</div>
  {% endif %}
<div class="card bg-light mb-3">
  <h3 class="card-header text-center">
    {% trans "Free food" %}
  </h3>
  {% if open.data %}
  {% render_table open %}
  {% else %}
  <div class="card-body">
    <div class="alert alert-warning">
      {% trans "There is no free food." %}
    </div>
  </div>
  {% endif %}
</div>
{% if club_tables %}
<div class="card bg-light mb-3">
  <h3 class="card-header text-center">
    {% trans "Food of your clubs" %}
  </h3>
</div>
  {% for table in club_tables %}
<div class="card bg-light mb-3">
  <h3 class="card-header text-center">
    {% trans "Food of club" %} {{ table.prefix }} 
  </h3>
  {% if table.data %}
    {% render_table table %}
  {% else %}
  <div class="card-body">
    <div class="alert alert-warning">
      {% trans "Yours club has not food yet." %}
    </div>
  </div>
  {% endif %}
</div>
  {% endfor %}
  {% endif %}
</div>


<script>
  document.addEventListener('DOMContentLoaded', function() {
      document.getElementById('goButton').addEventListener('click', function(event) {
          event.preventDefault();
          const slug = document.getElementById('slugInput').value;
          if (slug && !isNaN(slug)) {
              window.location.href = `/food/${slug}/`;
          } else {
              alert("Veuillez entrer un nombre valide.");
          }
      });
  });
  </script>

{% endblock %}