{% extends 'base_refresh.html' %}

{% block breadcrumbs %}
    {{ super() }}
    <li class="breadcrumb-item active" aria-current="page">{{ _("Machines status") }}</li>
{% endblock %}

{% block content %}
    <div class="container-fluid">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h1><i class="fas fa-tachometer-alt me-2"></i>{{ _("Machines status") }}</h1>
                <p class="text-muted mb-0">{{ _("Real-time machine status dashboard") }}</p>
            </div>
            <div class="d-flex gap-2 align-items-center">
                <span class="badge bg-primary fs-6">
                    <i class="fas fa-cogs me-1"></i>{{ machines|length }} {{ _("Machines") }}
                </span>
            </div>
        </div>

        <!-- Status Summary Cards -->
        <div class="row g-3 mb-4">
            {# Count machines using the same if-elif logic as display cards #}
            {% set counts = namespace(in_use=0, blocked=0, maintenance=0, offline=0, free=0) %}
            {% for mac in machines %}
                {% if mac.active_user() != None %}
                    {% set counts.in_use = counts.in_use + 1 %}
                {% elif mac.blocked %}
                    {% set counts.blocked = counts.blocked + 1 %}
                {% elif mac.maintenance_needed %}
                    {% set counts.maintenance = counts.maintenance + 1 %}
                {% elif not mac.isOnline() %}
                    {% set counts.offline = counts.offline + 1 %}
                {% else %}
                    {% set counts.free = counts.free + 1 %}
                {% endif %}
            {% endfor %}

            <div class="col-md-2 col-sm-4 col-6">
                <div class="card summary-card bg-success text-white h-100">
                    <div class="card-body text-center">
                        <i class="fas fa-user-check fa-2x mb-2"></i>
                        <h3 class="mb-0">{{ counts.in_use }}</h3>
                        <small>{{ _("IN USE") }}</small>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-4 col-6">
                <div class="card summary-card bg-light text-dark h-100">
                    <div class="card-body text-center">
                        <i class="fas fa-check-circle fa-2x mb-2"></i>
                        <h3 class="mb-0">{{ counts.free }}</h3>
                        <small>{{ _("FREE") }}</small>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-4 col-6">
                <div class="card summary-card bg-warning text-white h-100">
                    <div class="card-body text-center">
                        <i class="fas fa-tools fa-2x mb-2"></i>
                        <h3 class="mb-0">{{ counts.maintenance }}</h3>
                        <small>{{ _("MAINTENANCE") }}</small>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-4 col-6">
                <div class="card summary-card bg-danger text-white h-100">
                    <div class="card-body text-center">
                        <i class="fas fa-lock fa-2x mb-2"></i>
                        <h3 class="mb-0">{{ counts.blocked }}</h3>
                        <small>{{ _("BLOCKED") }}</small>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-4 col-6">
                <div class="card summary-card bg-secondary text-white h-100">
                    <div class="card-body text-center">
                        <i class="fas fa-power-off fa-2x mb-2"></i>
                        <h3 class="mb-0">{{ counts.offline }}</h3>
                        <small>{{ _("OFFLINE") }}</small>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-4 col-6">
                <div class="card summary-card bg-primary text-white h-100">
                    <div class="card-body text-center">
                        <i class="fas fa-sync-alt fa-2x mb-2"></i>
                        <h3 class="mb-0">30s</h3>
                        <small>{{ _("AUTO REFRESH") }}</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Detailed Machine Status -->
        <div class="d-flex justify-content-between align-items-center mb-3 mt-4">
            <h4 class="mb-0">
                <i class="fas fa-list me-2"></i>{{ _("Detailed Machine Status") }}
            </h4>
        </div>

        <div class="row g-3">
            {% for mac in machines %}
                <div class="col-lg-3 col-md-4 col-sm-6">
                    {% if mac.active_user() != None %}
                        <div class="card machine-card bg-success text-white">
                            {% set text = gettext("IN USE") %}
                            {% set icon = "fas fa-user-check" %}
                    {% elif mac.blocked %}
                        <div class="card machine-card bg-danger text-white">
                            {% set text = gettext("BLOCKED") %}
                            {% set icon = "fas fa-lock" %}
                    {% elif mac.maintenance_needed %}
                        <div class="card machine-card bg-warning text-white">
                            {% set text = gettext("MAINTENANCE") %}
                            {% set icon = "fas fa-tools" %}
                    {% elif not mac.isOnline() %}
                        <div class="card machine-card bg-secondary text-white">
                            {% set text = gettext("OFFLINE") %}
                            {% set icon = "fas fa-power-off" %}
                    {% else %}
                        <div class="card machine-card bg-light text-dark">
                            {% set text = gettext("FREE") %}
                            {% set icon = "fas fa-check-circle" %}
                    {% endif %}
                            <div class="card-header">
                                <h5 class="mb-0">
                                    <a href="{{ url_for('view_machine_use_history', machine_id=mac.machine_id) }}">
                                        {{ mac.machine_name }}
                                    </a>
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="status-icon">
                                    <i class="{{ icon }}"></i>
                                </div>
                                <h5 class="card-title mb-2">{{ text }}</h5>
                                {% if mac.active_user() != None %}
                                    <p class="mb-0">
                                        <i class="fas fa-user me-2"></i>
                                        <strong>{{ mac.active_user().name }}</strong>
                                    </p>
                                {% endif %}
                            </div>
                            {% if mac.active_board() != None %}
                                <div class="card-footer bg-transparent border-0">
                                    <small class="d-flex align-items-center justify-content-center">
                                        <i class="fas fa-network-wired me-2"></i>
                                        {{ mac.active_board().ip_address }}
                                    </small>
                                </div>
                            {% endif %}
                        </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}