{% extends "phone_auth/base.html" %}

{% block title_block %}
User Verification
{% endblock title_block %}

{% block body_block %}

<div class="phoneauth-jumbotron">
    <div class="message">
        {% if title %}
            <h1>{{ title }}</h1>
        {% endif %}
    </div>

    <div class="dpa-table-title">
        <h3>Email Addresses</h3>
        <a href="{% url 'phone_auth:add_email' %}">+ Add New</a>
    </div>
    <div class="dpa-table">
        <div class="dpa-row header">
            <div class="dpa-cell">
                Email Address
            </div>
            <div class="dpa-cell">
                Status
            </div>
        </div>
        {% for email_obj in email_addresses %}
        <div class="dpa-row">
            <div class="dpa-cell">
                {{ email_obj.email }}
            </div>
            <div class="dpa-cell">
                <form method="POST">
                    {% if email_obj.is_verified %}
                    <p>Verified</p>
                    {% else %}
                    {% csrf_token %}
                    <input type="hidden" name="method" value="email">
                    <input type="hidden" name="pk" value="{{ email_obj.pk }}">
                    <input class="dpa-cell-btn" type="submit" value="Verify">
                    {% endif %}
                </form>
            </div>
        </div>
        {% endfor %}
    </div>

    <div class="dpa-table-title">
        <h3>Phone Numbers</h3>
        <a href="{% url 'phone_auth:add_phone' %}">+ Add New</a>
    </div>
    <div class="dpa-table">
        <div class="dpa-row header">
            <div class="dpa-cell">
                Phone Number
            </div>
            <div class="dpa-cell">
                Status
            </div>
        </div>
        {% for phone_obj in phone_numbers %}
        <div class="dpa-row">
            <div class="dpa-cell">
                {{ phone_obj.phone }}
            </div>
            <div class="dpa-cell">
                {% if phone_obj.is_verified %}
                <p>Verified</p>
                {% else %}
                <form method="POST">
                    {% csrf_token %}
                    <input type="hidden" name="method" value="phone">
                    <input type="hidden" name="pk" value="{{ phone_obj.pk }}">
                    <input class="dpa-cell-btn" type="submit" value="Verify">
                </form>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock body_block %}