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

{% block title %}Sim Card edit{% endblock %}

{% form_theme simCardForm with ['bootstrap_4_layout.html.twig', _self] %}

{% block form_footer_widget %}
    <div class="modal-footer">
        <div class="layer w-100">
            <button type="button" class="btn btn-danger float-left" data-toggle="modal" data-target="#deleteModal">
                <span class="fas fa-trash"></span> Delete
            </button>
            {{ form_widget(form) }}
            <a class="btn btn-secondary float-right" style="margin-right: 5px;" href="{{ path('admin_tool_sim_cards_index') }}">
                <i class="fas fa-arrow-left"></i> Back to Sim Cards List</a>
        </div>
    </div>
{% endblock %}

{% block body %}

    <div class="row">
        <div class="col-md-6">
            <div class="bgc-white p-20 bd">
                <h5 class="c-grey-900">Edit Sim Card</h5>
                <hr class="mB-30">
                <div class="mT-10">
                    {{ form_start(simCardForm, {attr: {class: 'form', id: 'addSimCardForm'} }) }}
                    {{ form_widget(simCardForm) }}
                    {{ form_end(simCardForm) }}
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Delete Sim Card</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Do you really want to delete this Sim Card?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"><span class="fas fa-arrow-left"></span> Back</button>
                    {{ form_start(deleteForm, {'attr': {'class': 'form-inline'}}) }}
                    {{ form_widget(deleteForm.delete) }}
                    {{ form_end(deleteForm) }}
                </div>
            </div>
        </div>
    </div>

{% endblock body %}

{% block javascripts %}

    {{ parent() }}

    <script>

        function initTailDeviceComponent(){

            let SelectDeviceField = tail("#sim_card_device", {
                search: true,
                classNames: "alert-form-control",
                descriptions: true,
                multiple: false,
                hideDisabled: true,
                deselect: true,
                placeholder: 'Select device',
                text_empty: "No Device available",
            });

        }

        $(document).ready(function() {

            initTailDeviceComponent();

        });

    </script>

{% endblock %}