{% extends "clients/base.html" %}
{% load i18n %}
{% load bootstrap4 %}
{% block "dashboardcontent" %}
<div class="col-12 col-md-10 col-lg-10 dashboard-content user-profile">
    <h2 class="dash-content-title">Mein Profil</h2>
    <div class="card">
        <div class="card-header"><h4>Profildetails</h4></div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-5 col-lg-4 user-img">
                    <img src="images/user-profile.jpg" class="img-fluid" alt="user-img" />
                </div><!-- end columns -->
                
                <div class="col-md-7 col-lg-8  user-detail">
                    <ul class="list-unstyled">
                        <li><span>Name:</span> {{ object.full_name }}</li>
                        <li><span>Email:</span> {{ object.user.email }}</li>
                        <li><span>Adresse:</span> {{ object.full_address }}</li>
                    </ul>
                    <button class="btn" data-toggle="modal" data-target="#edit-profile">Profil bearbeiten</button>
                   </div><!-- end columns -->
                
                <div class="col-md-12 user-desc">
                    <h4>Profil löschen</h4>
                    <p>Um dein Profil zu löschen, klicke bitte auf den folgenden Button. Beachte bitte, dass du damit den Zugriff auf alle vergangenen Buchungen unwiderruflich verlierst. Natürlich kannst du jederzeit einen neuen Account erstellen, wenn du JourneyJoker wieder nutzen möchtest.</p>
                
                </div><!-- end columns -->
            </div><!-- end row -->
            
        </div><!-- end card-body -->
    </div><!-- end panel-detault -->
</div><!-- end columns -->
{% endblock %}
{% block "modal" %}
<div id="edit-profile" class="modal custom-modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">{% trans "Profildaten" %}</h3>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div><!-- end modal-header -->
            
            <div class="modal-body">
                <form method="POST"> 
                {% csrf_token %}
                {% bootstrap_form form %}
                <button class="btn btn-orange btn-block">{% trans "Anwenden" %}</button>
                </form>
            </div><!-- end modal-bpdy -->
        </div><!-- end modal-content -->
    </div><!-- end modal-dialog -->
</div><!-- end edit-profile -->
{% endblock %}