{% extends 'hungryFalconryApp/base.html' %}
{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}

{% block title %}
<h4 style="color: white; font-family:sans-serif;">Añadir raciones</h4>
{% endblock %}

{% block content %}

<div class="row">
    <div class="col-lg-4 col-md-6 mb-4">
        <div class="card h-100 text-black bg-ligth">
            <div class="card-header text-center"><h3>{{ nombre }}</h3></div>
            <form action="{% url 'add_raciones' nombre %}" method="post" class="form">
                {% csrf_token %}
                <div class="card-body">
                    {% bootstrap_form form %}
                </div>
                <div class="card-footer">
                    <a role="button" class="btn btn-warning" href="../">Atras</a>
                    <input type="submit" value="Guardar" id="guardar_prog" class="btn btn-success float-right">
                </div>
            </form>
        </div>
    </div>

    <div class="col-lg-3 col-md-4">
        <ul class="list-group">
            <li class="list-group-item d-flex justify-content-between align-items-center">
                {% bootstrap_messages %}
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
                Raciones actuales:
                {% if numRacionesActuales > 0 %}
                <span class="badge badge-warning badge-pill">{{ numRacionesActuales }}</span>
                {% else %}
                <span class="badge badge-success badge-pill">{{ numRacionesActuales }}</span>
                {% endif %}
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
                Raciones maximas:
                <span class="badge badge-primary badge-pill">{{ racionesMax }}</span>
            </li>
        </ul>
    </div>
</div>


{% endblock %}