{% extends "emails/base_email.html" %}

{% block title %}Cita confirmada{% endblock %}

{% block content %}
<p style="font-size: 15px; color: #4a4a4a; line-height: 1.6; margin: 0 0 20px 0;">
    Hola <strong style="color: #1a1a1a;">{{ appointment.full_name }}</strong>, tu cita ha sido agendada exitosamente.
</p>

<div style="background-color: #f0f0d8; border-radius: 8px; padding: 20px; margin: 0 0 24px 0;">
    <p style="font-size: 12px; color: #1693a5; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 12px 0;">
        {{ business.name }}
    </p>

    <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td style="padding: 6px 0;">
                <span style="font-size: 12px; color: #999999;">Fecha</span><br>
                <span style="font-size: 15px; font-weight: 700; color: #1a1a1a;">{{ appointment.date|date:"d F Y" }}</span>
            </td>
        </tr>
        <tr>
            <td style="padding: 6px 0;">
                <span style="font-size: 12px; color: #999999;">Hora</span><br>
                <span style="font-size: 15px; font-weight: 700; color: #1a1a1a;">{{ appointment.start_time|time:"H:i" }}</span>
            </td>
        </tr>
        <tr>
            <td style="padding: 6px 0;">
                <span style="font-size: 12px; color: #999999;">Servicio</span><br>
                <span style="font-size: 15px; font-weight: 700; color: #1a1a1a;">{{ appointment.appointment_type.name }}</span>
            </td>
        </tr>
        {% if appointment.resource %}
        <tr>
            <td style="padding: 6px 0;">
                <span style="font-size: 12px; color: #999999;">Profesional</span><br>
                <span style="font-size: 15px; font-weight: 700; color: #1a1a1a;">{{ appointment.resource.name }}</span>
            </td>
        </tr>
        {% endif %}
    </table>
</div>

<p style="font-size: 14px; color: #4a4a4a; line-height: 1.6; margin: 0 0 16px 0;">
    Agrega esta cita a tu calendario:
</p>

<table width="100%" cellpadding="0" cellspacing="0" style="margin: 0 0 20px 0;">
    <tr>
        <td style="padding: 4px 4px 4px 0; width: 50%;">
            <a href="{{ google_calendar_url }}" target="_blank"
               style="display: block; text-align: center; padding: 10px 16px; background-color: #1693a5; color: #ffffff; text-decoration: none; border-radius: 6px; font-size: 13px; font-weight: 600;">
                Google Calendar
            </a>
        </td>
        <td style="padding: 4px 0 4px 4px; width: 50%;">
            <a href="{{ ics_url }}" target="_blank"
               style="display: block; text-align: center; padding: 10px 16px; border: 2px solid #1693a5; color: #1693a5; text-decoration: none; border-radius: 6px; font-size: 13px; font-weight: 600;">
                Apple / iPhone
            </a>
        </td>
    </tr>
</table>

<div style="height: 1px; background-color: #e5e5e5; margin: 0 0 20px 0;"></div>

<p style="font-size: 14px; color: #999999; line-height: 1.6; margin: 0 0 20px 0;">
    ¿Necesitas cancelar o reprogramar?
    <a href="{{ edit_url }}" style="color: #1693a5; text-decoration: underline;">Gestiona tu cita aquí</a>.
</p>

<p style="font-size: 14px; color: #999999; margin: 0;">
    Gracias por confiar en <strong style="color: #4a4a4a;">{{ business.name }}</strong>
</p>
{% endblock %}