{% extends 'Base/base.html' %}
{% block body %}
        <div class="page-content">
            {% include 'Base/message.html' %}

            <article class="default-section">
                <div class="sides-container">
                    <div class="content-side">
                        <h3 class="aside-title">{% if type == 'password' %}Changer le mot de passe{% else %}<a href="/settings">Changer le mot de passe</a>{% endif %} > {% if type == 'email' %}Changer d'adresse email{% else %}<a href="/settings/email">Changer d'adresse email</a>{% endif %}</h3>

                        <div style="margin-bottom: 25px;">Si quelqu'un t'a dit de changer tes coordonnées en échange d'une récompense (crédits, jetons, mobis, une nouvelle voiture...) ne change pas tes coordonnées mais signale cet arnaqueur aux modérateurs !</div>

                        {% if type == 'password' %}
                        <form action="{{path}}/settings/password" method="post">
                            <div class="column">
                                <div class="column1">
                                    <h3 class="aside-title">Changer le mot de passe</h3>

                                    <div class="column space-bottom">
                                        <h5>Mot de passe actuel</h5>

                                        <input type="password" name="password" minlength="6" maxlength="100" placeholder="Tape ton mot de passe..." class="rounded-input red-active" required>
                                    </div>

                                    <div class="column">
                                        <h5>Nouveau mot de passe</h5>

                                        <input type="password" name="new_password" minlength="6" maxlength="32" placeholder="Tape ton nouveau mot de passe..." class="rounded-input red-active" required>
                                    </div>

                                    <div class="column space-bottom">
                                        <div class="form-help">Ton mot de passe doit contenir au moins 6 lettres/ chiffres et ne doit pas être facilement devinable par des personnes que tu connais</div>
                                    </div>

                                    <div class="column space-bottom">
                                        <h5>Répète ton mot de passe</h5>
                                        <input type="password" name="repeat_password" minlength="6" maxlength="32" placeholder="Répète ton mot de passe..." class="rounded-input red-active">
                                    </div>

                                    <div class="column space-bottom">
                                        <div class="captcha" style="text-align: center">
                                            <img class="captcha-img" src="{{path}}/captcha"><br>
                                            <img src="/assets/images/icons/reload.gif"> <a class="reload" style="font-size: 12px;cursor: pointer">Je n'arrive pas à lire le code, je peux en avoir un nouveau ?</a>
                                        </div>
                                        <h5>Rentre ici le code de sécurité</h5>
                                        <input type="text" name="bean_captcha" class="rounded-input blue-active" placeholder="Code de sécurité..." required autocomplete="off">
                                    </div>

                                    <div class="column space-bottom">
                                        <p style="text-align: center; margin-top: 30px;"><button type="submit" class="rounded-button red plain submit-form default-prevent">Opslaan</button></p>
                                    </div>
                                </div>
                            </div>
                        </form>
                        {% else %}
                        <form action="{{path}}/settings/email" method="post">
                            <div class="column">
                                <div class="column1">
                                    <h3 class="aside-title">Changer d'adresse email</h3>

                                    <div class="column space-bottom">
                                        <h5>Mot de passe actuel</h5>

                                        <input type="password" name="password" minlength="6" maxlength="100" placeholder="Tape ton mot de passe..." class="rounded-input red-active" required>
                                    </div>

                                    <div class="column space-bottom">
                                        <h5>Nouvelle adresse email</h5>

                                        <input type="email" name="email" minlength="6" maxlength="32" placeholder="Vul je nieuwe e-mailadres in..." class="rounded-input red-active" required>
                                    </div>

                                    <div class="column space-bottom">
                                        <div class="captcha" style="text-align: center">
                                            <img class="captcha-img" src="{{path}}/captcha"><br>
                                            <img src="/assets/images/icons/reload.gif"> <a class="reload" style="font-size: 12px;cursor: pointer">Je n'arrive pas à lire le code, je peux en avoir un nouveau ?</a>
                                        </div>
                                        <h5>Rentre ici le code de sécurité</h5>
                                        <input type="text" name="bean_captcha" class="rounded-input blue-active" placeholder="Code de sécurité..." required autocomplete="off">
                                    </div>

                                    <div class="column space-bottom">
                                        <p style="text-align: center; margin-top: 30px;"><button type="submit" class="rounded-button red plain submit-form default-prevent">Sauvegarder</button></p>
                                    </div>
                                </div>
                            </div>
                        </form>
                        {% endif %}
                    </div>

                    <div class="content-side">
                        <h3 class="aside-title">Mes préférences</h3>

                        <div class="option">
                            <div class="message">Voulez-vous que la radio soit diffusée automatiquement lorsque vous vous connectez ?</div>
                            <label class="switch">
                                <input type="checkbox" id="toggle" data-id="allow_radio"{% if data.allow_radio %} checked{% endif %}>
                                <span class="slider round"></span>
                            </label>
                        </div>

                        <div class="option">
                            <div class="message">Les joueurs peuvent t'envoyer une demande d'amis ?</div>
                            <label class="switch">
                                <input type="checkbox" id="toggle" data-id="allow_friend_requests"{% if data.allow_friend_requests %} checked{% endif %}>
                                <span class="slider round"></span>
                            </label>
                        </div>

                        <div class="option">
                            <div class="message">Voir quand tes amis se connectent et se déconnectent</div>
                            <label class="switch">
                                <input type="checkbox" id="toggle" data-id="allow_friend_alerts"{% if data.allow_friend_alerts %} checked{% endif %}>
                                <span class="slider round"></span>
                            </label>
                        </div>

                        <div class="option">
                            <div class="message">Les autres joueurs peuvent-il troquer avec toi ?</div>
                            <label class="switch">
                                <input type="checkbox" id="toggle" data-id="allow_trade"{% if data.allow_trade %} checked{% endif %}>
                                <span class="slider round"></span>
                            </label>
                        </div>

                        <div class="option">
                            <div class="message">Les autres joueurs peuvent-ils copier ton apparence ?</div>
                            <label class="switch">
                                <input type="checkbox" id="toggle" data-id="allow_mimic" {% if data.allow_mimic %} checked{% endif %}>
                                <span class="slider round"></span>
                            </label>
                        </div>

                        <div class="option">
                            <div class="message">Les autres joueurs peuvent-ils te rejoindre dans ton appart ?</div>
                            <label class="switch">
                                <input type="checkbox" id="toggle" data-id="allow_follow" {% if data.allow_follow %} checked{% endif %}>
                                <span class="slider round"></span>
                            </label>
                        </div>

                        <div class="option">
                            <div class="message">Les autres joueurs peuvent-ils murmurer avec toi ?</div>
                            <label class="switch">
                                <input type="checkbox" id="toggle" data-id="allow_whisper" {% if data.allow_whisper %} checked{% endif %}>
                                <span class="slider round"></span>
                            </label>
                        </div>

                        {% if permissions.login %}
                        <div class="column">
                            <div style="margin-bottom: 10px;"></div>
                            <h3 class="aside-title">Staff</h3>
                            <div class="option">
                                <div class="message">Les autres joueurs peuvent-ils voir ton statut ?</div>
                                <label class="switch">
                                    <input type="checkbox" id="toggle" data-id="hide_online" {% if data.hide_online == 0 %} checked{% endif %}>
                                    <span class="slider round"></span>
                                </label>
                            </div>

                            <div class="option">
                                <div class="message">Les joueurs sont-ils autorisés à vous voir sur le site ?</div>
                                <label class="switch">
                                    <input type="checkbox" id="toggle" data-id="hide_staff" {% if data.hide_staff == 0 %} checked{% endif %}>
                                    <span class="slider round"></span>
                                </label>
                            </div>
                        </div>
                        {% endif %}

                        <img src="/assets/images/pages/settings/safety.png" style="padding: 50px 104px;">
                    </div>
                </div>
            </article>
        </div>
{% endblock %}