{% extends "common/auth_page.twig" %}

{% block contentTitle %}{{'management-allergen'|trans}}{% endblock %}

{% block content %}

  <table id="allergensTable" class="display" style="width:100%">
    <thead>
      <tr>
        <th>{{'name'|trans}}</th>
        <th>{{'code'|trans}}</th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for allergen in allergens %}
        <tr>
          <td>{{allergen.name}}</td>
          <td>{{allergen.code|upper}}</td>
          <td><img class="logo" src="/static/images/allergens/{{allergen.image}}" alt="{{allergen.name}}" style="height:80px;max-width:100%;"/></td>
          <td><a class="btn btn-outline-dark" href="{{path_for(constant('GestionComedor\\Configuration\\Routers\\AllergenRouters::ALLERGENS_EDIT'),{id: allergen.id})}}">{{'edit'|trans}}</a></td>
          <td>
            <button class="btn btn-outline-danger deleteAllergen" data-allergen-id="{{allergen.id}}">
              {{'delete'|trans}}
            </button>
          </td>
        </tr>
      {% endfor %}  
    </tbody>
  </table>

<div class="row">
  <div class="col-md-12 text-center pb-5">
    <div class="text-right pt-2 pr-2 pb-0 border-right border-left">
      <button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#allergenModal" >{{'add-allergen'|trans}}</button>
    </div>  
  </div>
</div>


<div class="modal fade" id="allergenModal" tabindex="-1" role="dialog" aria-labelledby="addAllergenModal" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="addAllergenModal">{{'new-allergen'|trans}}</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form action="{{path_for(constant('GestionComedor\\Configuration\\Routers\\AllergenRouters::ALLERGENS_SAVE'))}}" method="POST" >
              <div class="form-group">
                <label for="name" class="font-weight-bold" >{{'name'|trans}}</label>
                <input type="text" class="form-control" id="name" name="name" value="" required/>
              </div>
              <div class="form-group">
                <label for="code" class="font-weight-bold" >{{'code'|trans}}</label>
                <input type="text" class="form-control" id="code" name="code" value="" required/>
              </div>
              <div class="form-group">
                <button class="btn btn-primary mb-2 btn-dark ">{{'add'|trans}}</button>
              </div>  
            </form> 
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{'cancel'|trans}}</button>
          </div>
        </div>
      </div>
    </div>

{% endblock %}