{# INVENTARIOS/gestion_equipos/templates/gestion_equipos/listar_mantenimientos.html #}
{% extends 'base.html' %}
{% load static %}

{% block title %}{{ titulo_pagina }}{% endblock %}

{% block content %}
    <h1>{{ titulo_pagina }}</h1>
    <p>
        {% if user.is_superuser or user.is_staff %}
        <button type="button" 
                onclick="window.location.href='{% url 'gestion_equipos:crear_mantenimiento' %}'" 
                class="btn btn btn-primary" 
                style="/* Tus estilos de botón */">
            Registrar Nuevo Mantenimiento
        </button>
         {% endif %}
    </p>

    {% if messages %}
        <ul class="messages" style="list-style: none; padding: 10px; margin: 10px 0; border-radius: 5px; {% if message.tags %}background-color: #f8d7da; color: #721c24;{% endif %}">
            {% for message in messages %}
                <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
            {% endfor %}
        </ul>
    {% endif %}

    {% if mantenimientos %}
        <table class="table-list" style="width: 100%; border-collapse: collapse; margin-top: 20px;"> 
            <thead>
                <tr style="background-color: #e2e2e2;">
                    <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">ID</th>
                    <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">Equipo</th>
                    <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">Tipo Mantenimiento</th>
                    <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">Fecha Mantenimiento</th> 
                    <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">Costo</th>
                    <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">Descripción</th> 
                    <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">Acciones</th>
                </tr>
            </thead>
            <tbody>
                {% for mantenimiento_obj in mantenimientos %}
                <tr style="background-color: {% cycle 'white' '#f0f0f0' %};">
                    <td style="padding: 8px; border: 1px solid #ddd;">{{ mantenimiento_obj.id }}</td>
                    <td style="padding: 8px; border: 1px solid #e0e0e0ff;">
                        {% if mantenimiento_obj.equipo %}
                            <a href="{% url 'gestion_equipos:detalle_equipo' mantenimiento_obj.equipo.pk %}">
                                {{ mantenimiento_obj.equipo.nombre }} ({{ mantenimiento_obj.equipo.numero_serie }})
                            </a>
                        {% else %}
                            <span class="text-muted">Equipo eliminado</span>
                        {% endif %}
                    </td>
                    <td style="padding: 8px; border: 1px solid #ddd;">{{ mantenimiento_obj.tipo_mantenimiento }}</td>
                    <td style="padding: 8px; border: 1px solid #ddd;">{{ mantenimiento_obj.fecha_mantenimiento|date:"Y-m-d" }}</td> 
                    <td style="padding: 8px; border: 1px solid #ddd;">{% if mantenimiento_obj.costo %}${{ mantenimiento_obj.costo }}{% else %}N/A{% endif %}</td>
                    <td style="padding: 8px; border: 1px solid #ddd;">{{ mantenimiento_obj.descripcion|truncatechars:50|default:"N/A" }}</td>
                    <td style="padding: 8px; border: 1px solid #ddd;">
                 
                        <div style="display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-start; align-items: center;">
                                   
                            <button type="button" 
                                    onclick="window.location.href='{% url 'gestion_equipos:detalle_mantenimiento' mantenimiento_obj.pk %}'" 
                                    class="btn btn-sm btn-info" 
                                    title="Ver detalles"
                                    style="white-space: nowrap;"><i class="fas fa-eye"></i> Ver</button>
                        
                            {% if user.is_superuser or user.is_staff %}
                            <button type="button" 
                                    onclick="window.location.href='{% url 'gestion_equipos:editar_mantenimiento' mantenimiento_obj.pk %}'" 
                                    class="btn btn-sm btn-secondary" 
                                    title="Editar mantenimiento"
                                    style="white-space: nowrap;"><i class="fas fa-edit"></i> Editar</button>
                            
                            <button type="button" 
                                    onclick="window.location.href='{% url 'gestion_equipos:eliminar_mantenimiento' mantenimiento_obj.pk %}'" 
                                    class="btn btn-sm btn-danger" 
                                    title="Eliminar mantenimiento"
                                    style="white-space: nowrap;"><i class="fas fa-trash-alt"></i> Eliminar</button>
                        </div>
                           {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    {% else %}
        <p>No hay mantenimientos registrados.</p>
    {% endif %}
{% endblock %}