{% extends 'layouts/base_modal.html' %}
{% load static %}

{% block content %}
<div class="rotation-view-more">

    <div class="rotation-view-more-rotation-status">
        <span class="rotation-view-more-status-badge">● Em andamento</span>
        <h2>Movimentação #{{ rotation.id }}</h2>
    </div>

    <div class="rotation-view-more-rotation-cards">
        <div class="rotation-view-more-card">
            <span class="rotation-view-more-label">Tempo no piquete</span>
            <strong>{{ rotation.duration_display_day }} dias</strong>
        </div>

        <div class="rotation-view-more-card">
            <span class="rotation-view-more-label">UGM-dia</span>
            <strong>{{ rotation.livestock_unit_day }}</strong>
        </div>

        <div class="rotation-view-more-card">
            <span class="rotation-view-more-label">Animais-dia</span>
            <strong>{{ rotation.animal_count_day }}</strong>
        </div>
    </div>

    <div class="rotation-view-more-rotation-section">
        <h3>Informações</h3>

        <div class="rotation-view-more-info-grid">

            <div class="rotation-view-more-info">
                <span>Lote</span>
                <strong>{{ rotation.batch|default:"—" }}</strong>
            </div>

            <div class="rotation-view-more-info">
                <span>Piquete</span>
                <strong>{{ rotation.paddock }}</strong>
            </div>

            <div class="rotation-view-more-info">
                <span>Entrada</span>
                <strong>{{ rotation.entry_date|date:"d/m/Y H:i" }}</strong>
            </div>

            <div class="rotation-view-more-info">
                <span>Animais</span>
                <strong>{{ rotation.animal_count }}</strong>
            </div>

            <div class="rotation-view-more-info">
                <span>UGM</span>
                <strong>{{ rotation.livestock_unit }}</strong>
            </div>

            <div class="rotation-view-more-info">
                <span>Consumo</span>
                <strong>{{ consume }} Kg</strong>
            </div>

        </div>
    </div>

    <div class="rotation-view-more-rotation-next">

    <h3>
        <i class="fa-solid fa-rotate"></i>
        Rotacionar lote
    </h3>

    <div class="rotation-next-actions">

        {% if free_paddocks|length > 0 %}
        <select name="next_paddock">
            <option selected disabled>Selecione o próximo piquete</option>

            {% for paddock in free_paddocks %}
                <option value="{{ paddock.id }}">{{ paddock.paddock_number }} | {% if paddock.current_rest %}Descanço: {{ paddock.current_rest }} dias {% else %}nunca utilizado{% endif %}</option>
            {% endfor %}
        </select>

        <button class="rotation-view-more-rotate">
            <i class="fa-solid fa-rotate"></i>
            Dar andamento
        </button>
        {% endif %}
        
        <button class="rotation-view-finish-rotate">
            <i class="fa-solid fa-clipboard-check"></i>
            Encerrar movimentação
        </button>

    </div>

</div>

</div>
{% endblock %}