{% extends "base.html" %}

{% block title %}{{ titulo }}{% endblock %}

{% block content %}
<div class="confirmation-container">
    <h2>{{ titulo }}</h2>
    <p>{{ mensaje }}</p>
    
    <div class="confirmation-buttons">
        <a href="{{ url_for('index', action=accion, confirm='yes') }}" class="btn btn-danger">Confirmar</a>
        <a href="{{ url_for('index') }}" class="btn btn-secondary">Cancelar</a>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
    .confirmation-container {
        max-width: 500px;
        margin: 50px auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        text-align: center;
    }
    
    .confirmation-buttons {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 20px;
    }
    
    .btn {
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        text-decoration: none;
        display: inline-block;
    }
    
    .btn-danger {
        background-color: #dc3545;
        color: white;
    }
    
    .btn-secondary {
        background-color: #6c757d;
        color: white;
    }
    
    .btn:hover {
        opacity: 0.9;
    }
</style>
{% endblock %}