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

{% block title %}displayClaims{% endblock %}

{% block body %}
        {% include '/loader/loader.html.twig' %}
    <div id="insuredPage" class="Page">
        {% for message in app.flashes('success') %}
            <div class="alert alert-success">
                {{ message }}
            </div>
        {% endfor %}
        {% for message in app.flashes('warning') %}
            <div class="alert alert-warning">
                {{ message }}
            </div>
        {% endfor %}
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="w-100" style="height: 33%; padding-bottom: 3rem;">
                        <div class="w-100 Size-2 Black" style="height: fit-content">Profil Utilisateur</div>
                        <div class="w-100" style="height: 85%">
                            <div class="card h-100">
                                <div class="card-header">
                                    <h4 class="card-title Size-3 Bold">Identité</h4>
                                </div>
                                <div class="card-content collapse show">
                                    <div class="card-body Black">
                                        <div class="Bold">{{ me.username }}</div>
                                        <div>{{ mission.insuredsAt(1).place.address }}</div>
                                        <div>{{ mission.insuredsAt(1).place.postcode ~ ' ' ~ mission.insuredsAt(1).place.city }}</div>
                                        <div>{{ me.email }}</div>
                                        <div>{{ me.phone }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="w-100" style="height: 33%; padding-bottom: 3rem;">
                        <div class="w-100 Size-2 Black" style="height: fit-content">Interface</div>
                        <div class="w-100" style="height: 85%">
                            <div class="card h-100 w-50">
                                <div class="card-header">
                                    <h4 class="Size-3 Bold">Langue et Région</h4>
                                </div>
                                <div class="card-content collapse show">
                                    <div class="card-body Black">
                                        <div>Français</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="w-100" style="height: 33%; padding-bottom: 3rem;">
                        <div class="w-100 Size-2 Black" style="height: fit-content">Notification</div>
                        <div class="w-100" style="height: 80%">
                            <div class="row">
                                <div class="col-lg-6 col-md-12 col-sm-12">
                                    <div class="card h-100">
                                        <div class="card-header">
                                            <h4 class="Size-3 Bold">Gestion des notifications </h4>
                                            <a class="heading-elements-toggle">
                                                <i class="bx bx-dots-vertical font-medium-3"></i>
                                            </a>
                                        </div>
                                        <div class="card-content collapse show">
                                            <div class="card-body Black">
                                                <div class="row">
                                                    <div class="col-8">Rendez-vous programmé</div>
                                                    <label class="col-4 center-vertical">
                                                        <input type="checkbox" class="custom-checkbox-red ml-auto mr-auto"/>
                                                    </label>
                                                </div>
                                                <div class="row">
                                                    <div class="col-8">Recevoir les notifications par SMS</div>
                                                    <label class="col-4 center-vertical">
                                                        <input type="checkbox" class="custom-checkbox-red ml-auto mr-auto"/>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-12 col-sm-12">
                                    <div class="card h-100">
                                        <div class="card-header">
                                            <h4 class="Size-3 Bold">Choix des notifications</h4>
                                            <a class="heading-elements-toggle">
                                                <i class="bx bx-dots-vertical font-medium-3"></i>
                                            </a>
                                        </div>
                                        <div class="card-content">
                                            <div class="card-body Black">
                                                <div class="row">
                                                    <div class="col-8">Rendez-vous programmé</div>
                                                    <label class="col-4 center-vertical">
                                                        <input type="checkbox" class="custom-checkbox-red ml-auto mr-auto"/>
                                                    </label>
                                                </div>
                                                <div class="row">
                                                    <div class="col-8">Rappel de rendez-vous</div>
                                                    <label class="col-4 center-vertical">
                                                        <input type="checkbox" class="custom-checkbox-red ml-auto mr-auto"/>
                                                    </label>
                                                </div>
                                                <div class="row">
                                                    <div class="col-8">Nouveau message</div>
                                                    <label class="col-4 center-vertical">
                                                        <input type="checkbox" class="custom-checkbox-red ml-auto mr-auto"/>
                                                    </label>
                                                </div>
                                                <div class="row">
                                                    <div class="col-8">Nouveau document</div>
                                                    <label class="col-4 center-vertical">
                                                        <input type="checkbox" class="custom-checkbox-red ml-auto mr-auto"/>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="dialog-confirm" class="jquery_dialog" title="modifier le profil">
        </div>

{% endblock %}

{% block javascripts %}

    <script type="text/javascript" class="code-js">

        function displayOn() {
            document.getElementById("loader").style.display = "none";
            document.getElementById("insuredPage").style.display = "flex";
        }

        $(document).ready(function () {
            displayOn();
        });
    </script>

{% endblock %}