{% extends "welcome_base.html" %}
{% load crispy_forms_filters %}
{% load i18n static %}

{% block content %}
    <section class="main my-2">
        <div class="container" style="max-width:60rem;">
            <div class="row form-container" id="form-container">
                <div class="col-12 ">
                    <a class="d-flex flex-center text-decoration-none mb-4"
                       href="{% url 'home' %}">
                        <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
                            <img class="d-dark-none"
                                 src="{% static 'images/logos/logo-d.png' %}"
                                 alt="{% trans 'home' %}"
                                 width="58" />
                            <img class="d-light-none"
                                 src="{% static 'images/logos/logo.png' %}"
                                 alt="{% trans 'home' %}"
                                 width="58" />
                        </div>
                    </a>
                    <div class="text-center">
                        <h3 class="text-body-highlight">{% trans 'Car Dealership Registration' %}</h3>
                        <p class="text-body-tertiary fs-9">{% trans 'Create your dealership account today' %}</p>
                    </div>
                    <div class="mx-auto mt-4 text-center">
             </div>
                    <form method="post" action="{% url 'account_signup' %}" class="needs-validation">
                        {% csrf_token %}
                        <div class="card theme-wizard">
                            <div class="card-body pt-4 pb-0">
                                {{ form|crispy }}
                            </div>
                            <button class="btn btn-primary" type="submit">{% trans 'Sign Up' %}</button>
                        </div>
                    </form>
                    <a href="#" class="float-start mt-4" data-bs-toggle="modal" data-bs-target="#contentModal">
              Our Refund Policy
            </a>
                </div>
            </div>
        </div>
    </section>

        <div class="modal fade" id="contentModal" tabindex="-1" aria-labelledby="contentModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="contentModalLabel">Refund Policy</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body modal-dialog-scrollable">
                {% include "haikal_policy/refund_policy.html" %}
            </div>
            </div>
        </div>
        </div>
        {% include 'footer.html' %}
        {% endblock content %}