<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>
    <title>2FA</title>
  </head>
  <body class="bg-light py-5">
    <div class="container">
        <div classs="row">
            <div class="col-12 col-md-8 col-lg-4 m-auto">

                <div id="content-container" class="card shadow">
                    <div class="card-body my-4">
                        <div class="row mb-4">
                            <div class="col-12 text-center">
                                {% block header %}
                                <i class="{% block header_icon_class %}fas fa-shield-alt{% endblock %} fa-3x"></i>
                                <div class="fs-3 mt-3">
                                    {% block header_text %}Two-Factor Authentication{% endblock %}
                                </div>
                                {% endblock %}
                            </div>
                        </div>
                        {% with WIDGET_ERROR_CLASS="is-invalid" %}
                        {% block content %}Nothing to see here!{% endblock %}
                        {% endwith %}
                    </div>
                </div><!-- content-container -->

                {% if is_debug %}
                <div class="card mt-4">
                    <div class="card-header">
                        Debug Info
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled">
                            <li><strong>User:</strong> {{ request.user }} ({{ request.user.pk }})</li>
                            <li><strong>Timestamp:</strong> {{ request.session.twilio_2fa_timestamp }}</li>
                            <li><strong>Twilio SID:</strong> {{ request.session.twilio_2fa_sid }}</li>
                            {% if is_verification %}
                            <li><strong>E164 Number:</strong> {{ phone_number }}</li>
                            <li><strong>Obfuscated Number:</strong> {{ obfuscated_phone_number }}</li>
                            <li><strong>Formatted Number:</strong> {{ formatted_phone_number }}</li>
                            {% endif %}
                            <li><strong>Next URL:</strong> {{ request.session.twilio_2fa_next_url|default_if_none:"--" }}</li>
                            <li><strong>Attempts Made:</strong> {{ request.session.twilio_2fa_attempts }}</li>
                            <li><strong>Timed Out Until:</strong> {{ request.session.twilio_2fa_timeout }}</li>
                        </ul>
                    </div>
                </div>
                {% endif %}

            </div>
        </div><!-- row -->
    </div><!-- container -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <style>
        body, html {
            width: 100%;
            height: 100%;
        }
    </style>
  </body>
</html>
