{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}RSVP{% endblock %}</title>

    <script src="{% static 'js/htmx.2.0.8.min.js' %}" integrity="sha384-/TgkGk7p307TH7EXJDuUlgG3Ce1UVolAOFopFekQkkXihi5u/6OCvVKyz1W+idaz"></script>
    <script src="{% static 'js/htmx-ext-ws.2.0.4.min.js' %}" integrity="sha384-1RwI/nvUSrMRuNj7hX1+27J8XDdCoSLf0EjEyF69nacuWyiJYoQ/j39RT1mSnd2G"></script>
    <script src="{% static 'js/jquery-4.0.0.slim.min.js' %}"></script>
    <script src="{% static 'js/alpine.3.15.8.min.js' %}" defer></script>
    <link rel="stylesheet" href="{% static 'css/simple.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>

<body hx-headers='{"X-CSRFTOKEN": "{{ csrf_token }}"}' hx-ext="ws">

<main>
    {% if messages %}
        <div class="messages">
            {% for message in messages %}
            <div class="card {% if message.tags %}{{ message.tags }}{% endif %}">{{ message }}</div>
            {% endfor %}
        </div>
    {% endif %}
    
    {% block content %}{% endblock %}
</main>

    {% block scripts %}{% endblock %}
</body>
</html>
