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

{% block title %}{{ 'Profile'|trans }}{% endblock %}

{% block body %}
{% include 'navbar.html.twig' %}

<main id="main" class="main">

    <div class="pagetitle">
        <h1>{{ 'Profile'|trans }}</h1>
    </div><!-- End Page Title -->

    <section class="section profile">
        <div class="row">
            <div class="col-xl-4">
                <div class="card">
                    <img
                            src="{% if user.profileImage is not null%}{{ asset('images/' ~ user.profileImage) }}{% else %}{{ asset('/images/no_image_available.svg.png') }}{% endif %}"
                            alt="{{ 'Profile'|trans }}"
                            class="img-fluid"
                    >
                    <div class="card-body profile-card pt-4 d-flex flex-column align-items-center">
                            {% if user.fullname != ''  %}
                                <h2>{{ user.fullname }}</h2>
                            {% else %}
                                <p>{{ 'Set your name from the Edit Profile section'|trans }}</p>
                            {% endif %}
                        {% if user.isTrainer %}
                            <h3>{{ 'Trainer'|trans }}</h3>
                        {% endif %}
                    </div>
                    {% if user.about is not null %}
                        <div class="card-footer">
                            <p>{{ user.about  }}</p>
                        </div>
                    {% endif %}
                </div>
            </div>

            <div class="col-xl-8">

                <div class="card">
                    <div class="card-body pt-3">
                        <!-- Bordered Tabs -->
                        <ul class="nav nav-tabs nav-tabs-bordered">

                            <li class="nav-item">
                                <button class="nav-link {% if tab is defined and tab is not null and tab == 'profile' %} active {% elseif tab is defined and tab is null %} active{% endif %}" data-bs-toggle="tab" data-bs-target="#profile-edit">{{ 'Edit Profile'|trans }}</button>
                            </li>

                            <li class="nav-item">
                                <button class="nav-link{% if tab is defined and tab is not null and tab == 'password' %} active {% endif %}" data-bs-toggle="tab" data-bs-target="#profile-change-password">{{ 'Change password'|trans }}</button>
                            </li>

                        </ul>
                        <div class="tab-content pt-2">
                            <div class="tab-pane {% if tab is defined and tab is not null and tab == 'profile' %} show active {% elseif tab is defined and tab is null %} show active {% endif %} fade  profile-edit pt-3" id="profile-edit">
                                {% if tab is defined and tab is not null and tab == 'profile' %}
                                    {% for message in app.flashes('notice') %}
                                        <div class="row mb-3">
                                            <div class="alert alert-success" role="alert">
                                                {{ message }}
                                            </div>
                                        </div>
                                    {% endfor %}
                                {% endif %}

                                <form method="post" name="{{ field_name(editProfileForm) }}" enctype="multipart/form-data">
                                    {% for error in field_errors(editProfileForm.profileImage) %}
                                    <div class="row mb-3">
                                        <div class="alert alert-danger" role="alert">
                                            {{ error|trans }}
                                        </div>
                                    </div>
                                    {% endfor %}
                                    {% for error in field_errors(editProfileForm.fullname) %}
                                    <div class="row mb-3">
                                        <div class="alert alert-danger" role="alert">
                                            {{ error|trans }}
                                        </div>
                                    </div>
                                    {% endfor %}
                                    {% for error in field_errors(editProfileForm.about) %}
                                    <div class="row mb-3">
                                        <div class="alert alert-danger" role="alert">
                                            {{ error|trans }}
                                        </div>
                                    </div>
                                    {% endfor %}

                                    <div class="row mb-3">
                                        <label for="profileImage" class="col-md-4 col-lg-3 col-form-label">{{ 'Profile Image'|trans }}</label>
                                        <div class="col-md-8 col-lg-9">
                                            <div class="pt-2">
                                                <label for="formFile" class="form-label">{{ 'Upload new profile image'|trans }}</label>
                                                <input type="file" id="formFile" name="{{ field_name(editProfileForm.profileImage) }}" class="form-control">
                                            </div>

                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <label for="fullName" class="col-md-4 col-lg-3 col-form-label">{{ 'Full Name'|trans }}</label>
                                        <div class="col-md-8 col-lg-9">
                                            <input name="{{ field_name(editProfileForm.fullname) }}"
                                                   type="text" class="form-control"
                                                   id="fullName"
                                                   placeholder="{{ 'Your full name goes here'|trans }}" value="{% if user.fullname != '' %}{{ user.fullname }}{% endif %}"
                                            >
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <label for="about" class="col-md-4 col-lg-3 col-form-label">{{ 'About'|trans }}</label>
                                        <div class="col-md-8 col-lg-9">
                                            <textarea
                                                    name="{{ field_name(editProfileForm.about) }}"
                                                      class="form-control" id="about" style="height: 100px" placeholder="{{ 'Write something about you, if you want. Otherwise this section will remain empty'|trans }}"
                                            >{% if user.about !='' %}{{ user.about }}{% endif %}</textarea>
                                        </div>
                                    </div>
                                    {{ form_row(editProfileForm._token) }}
                                    <input type="hidden" name="{{ field_name(editProfileForm.tab) }}" value="{{ field_value(editProfileForm.tab) }}">

                                    <div class="text-center">
                                        <button class="btn btn-primary"
                                                name="{{ field_name(editProfileForm.submit) }}"
                                                type="submit">{{ field_label(editProfileForm.submit) }}</button>
                                    </div>
                                </form>
                            </div>

                            <div class="tab-pane {% if tab is defined and tab is not null and tab == 'password' %} show active{% endif %} fade pt-3" id="profile-change-password">
                                <!-- Change Password Form -->
                                {% if tab is defined and tab is not null and tab == 'password' %}
                                    {% for message in app.flashes('notice') %}
                                        <div class="row mb-3">
                                            <div class="alert alert-success" role="alert">
                                                {{ message }}
                                            </div>
                                        </div>
                                    {% endfor %}
                                {% endif %}
                                <form name="{{ field_name(changePasswordForm) }}" method="post">
                                    {% for error in field_errors(changePasswordForm) %}
                                        <div class="row mb-3">
                                            <div class="alert alert-danger" role="alert">
                                                {{ error|trans }}
                                            </div>
                                        </div>
                                    {% endfor %}
                                    {% for error in field_errors(changePasswordForm.currentPassword) %}
                                        <div class="row mb-3">
                                            <div class="alert alert-danger" role="alert">
                                                {{ error|trans }}
                                            </div>
                                        </div>
                                    {% endfor %}
                                    {% for error in field_errors(changePasswordForm.plainPassword.first) %}
                                        <div class="row mb-3">
                                            <div class="alert alert-danger" role="alert">
                                                {{ error|trans }}
                                            </div>
                                        </div>
                                    {% endfor %}
                                    {% for error in field_errors(changePasswordForm.plainPassword.second) %}
                                        <div class="row mb-3">
                                            <div class="alert alert-danger" role="alert">
                                                {{ error|trans }}
                                            </div>
                                        </div>
                                    {% endfor %}


                                    <div class="row mb-3">
                                        <label for="currentPassword" class="col-md-4 col-lg-3 col-form-label">{{ 'Current password'|trans }}</label>
                                        <div class="col-md-8 col-lg-9">
                                            <input type="password"
                                                   name="{{ field_name(changePasswordForm.currentPassword) }}"
                                                   class="form-control" id="currentPassword" required>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <label for="newPassword" class="col-md-4 col-lg-3 col-form-label">{{ 'New password'|trans }}</label>
                                        <div class="col-md-8 col-lg-9">
                                            <input name="{{ field_name(changePasswordForm.plainPassword.first) }}" type="password" class="form-control" id="newPassword">
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <label for="renewPassword" class="col-md-4 col-lg-3 col-form-label">{{ 'Re-enter new password'|trans }}</label>
                                        <div class="col-md-8 col-lg-9">
                                            <input name="{{ field_name(changePasswordForm.plainPassword.second) }}" type="password" class="form-control" id="renewPassword">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <button class="btn btn-primary"
                                                name="{{ field_label(changePasswordForm.submit) }}"
                                                type="submit">{{ field_label(changePasswordForm.submit) }}</button>
                                    </div>

                                    <input type="hidden" name="{{ field_name(changePasswordForm.tab) }}" value="{{ field_value(changePasswordForm.tab) }}">
                                    {{ form_row(changePasswordForm._token) }}

                                </form><!-- End Change Password Form -->

                            </div>

                        </div><!-- End Bordered Tabs -->

                    </div>
                </div>

            </div>
        </div>
    </section>

</main><!-- End #main -->
{% endblock %}