{% extends "base.html" %}

{% block content %}
    <h2>User Loans</h2>
    <p class="relationship-note">
        <strong>Relationship:</strong> One user can loan multiple tablets (one-to-many).
        This page demonstrates the many-to-many relationship between users and tablets via the loans table.
    </p>
    
    <div class="user-loans-container">
        {% for user_data in users_with_loans %}
            {% set user = user_data.user %}
            {% set loans = user_data.loans %}
            
            <div class="user-card">
                <div class="user-header">
                    <h3>{{ user.name }} ({{ user.identification }})</h3>
                    <span class="loan-count">{{ loans|length }} tablet{{ 's' if loans|length != 1 else '' }} loaned</span>
                </div>
                
                {% if loans %}
                    <table class="loans-table">
                        <thead>
                            <tr>
                                <th>Tablet</th>
                                <th>Serial Number</th>
                                <th>Loan Date</th>
                                <th>Return Date</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for loan in loans %}
                                <tr class="loan-row status-{{ loan.status }}">
                                    <td>{{ loan.brand }} {{ loan.model }}</td>
                                    <td>{{ loan.serial_number }}</td>
                                    <td>{{ loan.loan_date }}</td>
                                    <td>{{ loan.return_date or '-' }}</td>
                                    <td>
                                        <span class="status-badge status-{{ loan.status }}">
                                            {{ loan.status }}
                                        </span>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                {% else %}
                    <p class="no-loans">No loans recorded for this user.</p>
                {% endif %}
            </div>
        {% endfor %}
        
        {% if users_with_loans|length == 0 %}
            <p class="no-data">No users found. Add users and loan tablets to see data here.</p>
        {% endif %}
    </div>

    <style>
        .relationship-note {
            background-color: #e8f5e9;
            padding: 12px;
            border-radius: 4px;
            margin-bottom: 20px;
            border-left: 4px solid #4CAF50;
        }
        
        .user-loans-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .user-card {
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        .user-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        .user-header h3 {
            margin: 0;
            color: #333;
        }
        
        .loan-count {
            color: #666;
            font-style: italic;
        }
        
        .loans-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .loans-table th,
        .loans-table td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        
        .loans-table th {
            background-color: #f5f5f5;
            font-weight: bold;
        }
        
        .loan-row.status-active {
            background-color: #fff8e1;
        }
        
        .loan-row.status-returned {
            background-color: #e8f5e9;
        }
        
        .status-badge {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: bold;
            text-transform: capitalize;
        }
        
        .status-badge.status-active {
            background-color: #ffc107;
            color: #000;
        }
        
        .status-badge.status-returned {
            background-color: #4CAF50;
            color: white;
        }
        
        .no-loans {
            color: #999;
            font-style: italic;
            text-align: center;
            padding: 20px;
        }
        
        .no-data {
            text-align: center;
            padding: 40px;
            color: #999;
        }
    </style>
{% endblock %}