{% extends "base_layout.html.twig" %}

{% block title %}{{ "twilio.create_caller_id" | trans }} - {{ user.username|default('') }}{% endblock %}

{% block menu %}
    {% set selected_option = 'twilio' %}
    {% set sub_selected_option = 'strtwilioipe' %}
    {{ parent() }}
{% endblock %}

{% block stylesheets %}
    {{ encore_entry_link_tags('users') }}
{% endblock %}

{% block form_content %}
    {% set fields = [
        'phone',
    ] %}
    {% if validationCode is defined and validationCode is not null %}
        <div class="row">
            <div class="col">
                <span>{{ 'twilio.verification_code_message' | trans }} <b>{{ validationCode }}</b></span>
            </div>
        </div>
    {% endif %}
    <form class="row" method="post" action="{{ url('twilio_create_phone_number') }}">
        <div class="col-12">
            <h4>
                {{ 'twilio.add_caller_id_title' | trans }}
            </h4>
        </div>
        {% for f in fields %}
            {% if form.offsetExists(f) %}
                <div class="col-md-6">
                    {{ form_row(form.offsetGet(f)) }}
                </div>
                <div class="col-md-6"></div>
            {% endif %}
        {% endfor %}
        <div class="col-md-6 mt-4 mb-2">
            {{ form_rest(form) }}
            {% if phone.id is null %}
                <input type="submit" class="btn btn-primary" value="{{ 'actions.submit'| trans }}">
            {% endif %}
            {#% if phone.id|default('') != ''%}
                <a href="{{path('twilio_delete_phone', {'phone_id': phone.id})}}" class="btn btn-primary delete-twilio-phone" > {{ 'actions.delete'| trans }}</a>
            {% endif %#}
        </div>
    </form>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        $(document).ready(function () {

            $(".delete-stripe-customer").click(function () {
                if (confirm("{{ 'general.delete_prompt' | trans }}")) {

                } else {
                    return false;
                }
            });
        });
    </script>
{% endblock %}