{% extends "base.html" %}

{% block title %}SW Labs Management System{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-12">
            <h1 class="mb-4">
                <i class="fas fa-flask"></i> SW Labs Management System
            </h1>
            
            {% if not current_user.is_authenticated %}
            <div class="alert alert-info">
                <i class="fas fa-info-circle"></i> Please <a href="{{ url_for('login') }}" class="alert-link">login</a> to occupy or release stations.
            </div>
            {% endif %}
            
            <!-- Statistics Cards -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">{{ total_labs }}</h5>
                            <p class="card-text">Total Labs</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">{{ total_stations }}</h5>
                            <p class="card-text">Total Stations</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">{{ available_stations }}</h5>
                            <p class="card-text">Available Stations</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">{{ occupied_stations }}</h5>
                            <p class="card-text">Occupied Stations</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Labs Tabs -->
            {% if labs %}
                <div class="card">
                    <div class="card-header">
                        <ul class="nav nav-tabs card-header-tabs" id="labTabs" role="tablist">
                            {% for lab in labs %}
                            <li class="nav-item" role="presentation">
                                <button class="nav-link {% if loop.first %}active{% endif %}" 
                                        id="lab-{{ lab.id }}-tab" 
                                        data-bs-toggle="tab" 
                                        data-bs-target="#lab-{{ lab.id }}" 
                                        type="button" 
                                        role="tab" 
                                        aria-controls="lab-{{ lab.id }}" 
                                        aria-selected="{% if loop.first %}true{% else %}false{% endif %}">
                                    <i class="fas fa-building"></i> {{ lab.name }}
                                </button>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="tab-content" id="labTabsContent">
                            {% for lab in labs %}
                            <div class="tab-pane fade {% if loop.first %}show active{% endif %}" 
                                 id="lab-{{ lab.id }}" 
                                 role="tabpanel" 
                                 aria-labelledby="lab-{{ lab.id }}-tab">
                                
                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <h5><i class="fas fa-building"></i> {{ lab.name }}</h5>
                                        <p class="text-muted">
                                            <i class="fas fa-map-marker-alt"></i> {{ lab.location or 'Location not specified' }}
                                            {% if lab.description %} | {{ lab.description }}{% endif %}
                                        </p>
                                    </div>
                                </div>

                                {% if lab.stations %}
                                    <div class="row">
                                        {% for station in lab.stations %}
                                        <div class="col-md-6 col-lg-4 mb-3">
                                            <div class="card h-100">
                                                <div class="card-body">
                                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                                        <h6 class="card-title mb-0">
                                                            <i class="fas fa-desktop"></i> {{ station.name }}
                                                        </h6>
                                                        <div>
                                                            {% if station.is_functional %}
                                                                <span class="badge bg-success">
                                                                    <i class="fas fa-check"></i> Functional
                                                                </span>
                                                            {% else %}
                                                                <span class="badge bg-danger">
                                                                    <i class="fas fa-times"></i> Non-functional
                                                                </span>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                    
                                                    <p class="card-text small">{{ station.description or 'No description' }}</p>
                                                    
                                                    <div class="mt-2">
                                                        {% if station.is_occupied %}
                                                            <span class="badge bg-warning text-dark">
                                                                <i class="fas fa-user"></i> Occupied
                                                            </span>
                                                            {% if station.occupied_until %}
                                                                <br><small class="text-muted">
                                                                    <i class="fas fa-clock"></i> Until: {{ station.occupied_until.strftime('%Y-%m-%d %H:%M') }}
                                                                </small>
                                                            {% endif %}
                                                        {% else %}
                                                            <span class="badge bg-success">
                                                                <i class="fas fa-check"></i> Available
                                                            </span>
                                                        {% endif %}
                                                    </div>
                                                    
                                                    <div class="mt-3">
                                                        <a href="{{ url_for('station_detail', station_id=station.id) }}" 
                                                           class="btn btn-sm btn-outline-primary">
                                                           <i class="fas fa-eye"></i> View Details
                                                        </a>
                                                        {% if not station.is_occupied and station.is_functional %}
                                                            <a href="{{ url_for('occupy_station', station_id=station.id) }}" 
                                                               class="btn btn-sm btn-primary">
                                                               <i class="fas fa-user-plus"></i> Occupy
                                                            </a>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {% endfor %}
                                    </div>
                                {% else %}
                                    <div class="alert alert-info">
                                        <i class="fas fa-info-circle"></i> No stations available in this lab.
                                    </div>
                                {% endif %}
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% else %}
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle"></i> No labs found. 
                    {% if current_user.is_authenticated and current_user.is_admin %}
                    <a href="{{ url_for('admin_panel') }}" class="alert-link">Add labs in the admin panel</a>.
                    {% endif %}
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}