<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>✅ Equipo Reparado - {{ equipment_name }}</title>
    <style>
        body {
            font-family: 'Arial', 'Helvetica', sans-serif;
            line-height: 1.6;
            color: #333;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: #fff;
        }
        .header {
            background-color: #10b981;
            color: white;
            padding: 15px;
            border-radius: 8px 8px 0 0;
            text-align: center;
        }
        .content {
            padding: 20px;
        }
        .equipment-info {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 6px;
            margin: 20px 0;
        }
        .equipment-info dt {
            font-weight: bold;
            margin-bottom: 5px;
        }
        .equipment-info dd {
            margin-left: 0;
            margin-bottom: 10px;
        }
        .repair-details {
            background-color: #dcfce7;
            border: 1px solid #a3e635;
            padding: 15px;
            border-radius: 6px;
            margin: 20px 0;
        }
        .action-button {
            display: inline-block;
            background-color: #10b981;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 6px;
            font-weight: bold;
            margin: 10px 0;
        }
        .downtime-summary {
            background-color: #fef3c7;
            padding: 15px;
            border-radius: 6px;
            margin: 20px 0;
        }
        .footer {
            text-align: center;
            margin-top: 20px;
            color: #666;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>✅ Equipo Reparado</h1>
            <p>Equipo de Vuelta en Servicio</p>
        </div>
        
        <div class="content">
            <p>Estimado Equipo,</p>
            
            <p>Nos complace informarle que el equipo <strong>{{ equipment_name }}</strong> ha sido reparado y vuelto al servicio con éxito.</p>
            
            <div class="equipment-info">
                <h2>Información del Equipo</h2>
                <dl>
                    <dt>Nombre del Equipo:</dt>
                    <dd>{{ equipment_name }}</dd>
                    
                    <dt>Tipo:</dt>
                    <dd>{{ equipment_type }}</dd>
                    
                    <dt>Modelo:</dt>
                    <dd>{{ equipment_model }}</dd>
                    
                    <dt>Ubicación:</dt>
                    <dd>{{ equipment_location }}</dd>
                </dl>
            </div>
            
            <div class="repair-details">
                <h2>Detalles de la Reparación</h2>
                <dl>
                    <dt>Fecha de Reparación:</dt>
                    <dd>{{ repair_date }}</dd>
                    
                    <dt>Técnico:</dt>
                    <dd>{{ technician_name }}</dd>
                    
                    <dt>Descripción de la Reparación:</dt>
                    <dd>{{ repair_description }}</dd>
                    
                    {% if parts_replaced and parts_replaced|length > 0 %}
                    <dt>Piezas Reemplazadas:</dt>
                    <dd>{{ parts_replaced|join(', ') }}</dd>
                    {% endif %}
                    
                    <dt>Costo de Reparación:</dt>
                    <dd>€{{ "%.2f"|format(cost) }}</dd>
                    
                    <dt>Resultados de Pruebas:</dt>
                    <dd>{{ '✅ Equipo probado y operativo' if test_results else '⚠️ Equipo requiere pruebas adicionales' }}</dd>
                </dl>
            </div>
            
            <div class="downtime-summary">
                <h2>Resumen de Tiempo de Inactividad</h2>
                <dl>
                    <dt>Tiempo Total de Inactividad:</dt>
                    <dd>{{ downtime_hours }} horas</dd>
                    
                    <dt>Impacto de Costo:</dt>
                    <dd>€{{ "%.2f"|format(cost) }}</dd>
                </dl>
            </div>
            
            <p>El equipo ahora está <strong>OPERATIVO</strong> y disponible para producción.</p>
            
            <p><a href="{{ equipment_link }}" class="action-button">Ver Detalles del Equipo</a></p>
            
            <p>Gracias por su pronta atención a este asunto.</p>
            
            <p>Atentamente,<br>
            Equipo de {{ bakery_name }}</p>
        </div>
        
        <div class="footer">
            <p>Esta es una notificación automática del Sistema de Monitoreo de Equipos de {{ bakery_name }}</p>
            <p>© {{ current_year }} {{ bakery_name }}. Todos los derechos reservados.</p>
        </div>
    </div>
</body>
</html>