{% extends 'layouts/members.twig' %}

{% block members_content %}


    {% set title = 'Welcome ' ~ name %}
    {% set subtitle = 'Please verify your account to get full access to the site.' %}

    {% if member.id_verified %}
        {% set subtitle = 'Your account has now been verified.' %}
    {% endif %}

    {% include 'includes/elements/intro_block.twig' with {
        intro_title: title,
        intro_content: subtitle,
        class: 'membersIntro',
        use_h1: true
    }%}

    <div class="membersContentWrap">


        <div class="verifyAccountWrap">


            {% if member.id_verified %}
                <p>
                    Thank you for verifying your account.
                </p>
                <a href="/members/" class="button">Proceed to Dashboard</a>
            {% else %}

                <account-verification inline-template email-in="{{ member.email }}" contact-no-in="{{ member.contact_no }}">
                    <div class="verificationWrapper">
                        <template v-for="error in errors">
                            <div class="error" v-html="error"></div>
                        </template>
                        <template v-for="message in messages">
                            <div class="success" v-html="message"></div>
                        </template>

                        <form action="{{ self }}" method="post">

                            <template v-if="delivery_method == 'sms'">
                                {{ form_field({
                                    'type': 'text',
                                    'errors': form_details.errors,
                                    'label': 'Your Phone Number',
                                    'required': true,
                                    'id': 'contactNr',
                                    'name': 'contact_no',
                                    'class': 'text',
                                    'value': member.contact_no,
                                    'attributes': {
                                        'v-model': 'contact_no'
                                    }
                                })|raw }}
                            </template>

                            {{ form_field({
                                'type': 'radio',
                                'errors': form_details.errors,
                                'label': 'Send via Email',
                                'id': 'sendEmail',
                                'name': 'delivery_method',
                                'class': 'text',
                                'field_value': 'email',
                                'attributes': {
                                    'v-model': 'delivery_method'
                                }
                            })|raw }}

                            <template v-if="delivery_method == 'email'">
                                {{ form_field({
                                    'type': 'email',
                                    'errors': form_details.errors,
                                    'label': 'Your Email',
                                    'required': true,
                                    'id': 'email',
                                    'name': 'email',
                                    'class': 'text',
                                    'value': member.email,
                                    'attributes': {
                                        'v-model': 'email'
                                    }
                                })|raw }}
                            </template>
                            <div class="row">
                                <button type="submit"
                                        name="action"
                                        @click.prevent="requestCode()"
                                        value="send_code"
                                        class="button">
                                    Send me verification code
                                </button>
                            </div>
                        </form>

                        <form action="{{ self }}" method="post">
                            <div class="row">
                                <label for="code">
                                    Code
                                </label>
                                <input type="text"
                                       name="code"
                                       id="code"
                                       value=""/>
                            </div>

                            <div class="row">
                                <button type="submit"
                                        name="action"
                                        value="verify_code"
                                        class="button">
                                    Confirm code
                                </button>
                            </div>
                        </form>
                    </div>
                </account-verification>
            {% endif %}

        </div><!-- .greetingContent -->


    </div> <!-- .verifyAccountWrap -->

{% endblock %}
