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

{% block members_content %}


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

    {% 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 error is not empty %}
                <div class="error">{{ error }}</div>
            {% endif %}
            <account-verification inline-template email-in="{{ member.email }}"
                                  contact-no-in="{{ member.contact_no }}"
                                  errors="{{ errors|json_encode }}"
                                  messages="{{ messages|json_encode }}"
            >
                <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="{{ route('members-send-verification-code', [], false) }}" 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="{{ route('members-verify-code', [], false) }}" 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"
                                    class="button"
                            >
                                Confirm code
                            </button>
                        </div>
                    </form>
                </div>
            </account-verification>

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

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

{% endblock %}
