{% load static %}
<!DOCTYPE html>
<html>

<head>
    <meta charset="ISO-8859-1" />
    <meta name="description" content="A website made by C4 Patino" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
        crossorigin="anonymous"></script>
    <script src="{% static 'jquery-3.6.1.min.js' %}"></script>

    <link rel="stylesheet" type="text/css" href='{% static "css/main.css" %}' />
    <link rel="icon" type="image/x-icon" href='{% static "favicon.ico" %}'>

    <script src="{% static 'smart-selects/admin/js/chainedfk.js' %}"></script>
    <script src="{% static 'smart-selects/admin/js/chainedm2m.js' %}"></script>

    {% block title %}
    <title>
        {% if title %}{{ title }}{% endif %} | House Wars
    </title>
    {% endblock %}
</head>

<body>
    <main role="main" class="container-fluid h-100 m-0 p-0">
        <div class="row h-100 m-0 p-0">
            <div class="col-lg-4 col-md-12 p-5">
                <div id="step-counter" class="mb-5">
                    {% block step-counter %}{% endblock %}
                </div>

                <h2 id="header" class="mt-2 mb-4">{% if formtitle %}{{ formtitle }}{% endif %}</h2>

                <!-- Main content -->
                {% block content %}{% endblock %}

                <!-- Message content and form errors -->
                <div class="mt-2">
                    {% if messages %}
                    {% for message in messages %}
                    <div class="alert alert-{{  message.tags  }}">{{ message }}</div>
                    {% endfor %}
                    {% endif %}

                    {% if form.errors %}
                    {% for field in form %}
                    {% for error in field.errors %}
                    <div class="alert alert-danger">{{ error }}</div>
                    {% endfor %}
                    {% endfor %}

                    {% for error in form.non_field_errors %}
                    <div class="alert alert-danger">{{ error }}</div>
                    {% endfor %}
                    {% endif %}
                </div>
            </div>
            <div id="banner" class="col row align-items-center m-0 pe-5">
                <div id="carousel" class="carousel slide m-0 p-0" data-bs-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="d-block w-100" src='{% static "img/IMG_5817.JPG" %}'>
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src='{% static "img/IMG_5818.JPG" %}'>
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src='{% static "img/IMG_5819.JPG" %}'>
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src='{% static "img/IMG_5821.JPG" %}'>
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src='{% static "img/IMG_5823.JPG" %}'>
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src='{% static "img/IMG_5826.JPG" %}'>
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src='{% static "img/IMG_5849.JPG" %}'>
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src='{% static "img/IMG_5856.JPG" %}'>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>

</html>