{% trans_default_domain 'FOSUserBundle' %}

<style>
    .mb-change-password-page {
        min-height: calc(100vh - 120px);
        padding: 35px 15px;
        background: linear-gradient(145deg, #f1f6ff 0%, #eef3f6 45%, #f8f9fb 100%);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mb-change-password-card {
        width: 100%;
        max-width: 560px;
        border: 1px solid #d7e2ec;
        border-radius: 10px;
        background-color: #ffffff;
        box-shadow: 0 10px 30px rgba(20, 46, 78, 0.10);
        overflow: hidden;
    }

    .mb-change-password-card .panel-heading {
        background: #1f4e79;
        color: #ffffff;
        border-bottom: 0;
        padding: 14px 20px;
    }

    .mb-change-password-card .panel-body {
        padding: 25px 22px 20px;
    }

    .mb-change-password-card .control-label {
        font-weight: 600;
        color: #21405f;
    }

    .mb-change-password-card .btn-primary {
        background-color: #1f4e79;
        border-color: #1f4e79;
        font-weight: 600;
    }

    .mb-change-password-card .btn-primary:hover,
    .mb-change-password-card .btn-primary:focus {
        background-color: #163b5e;
        border-color: #163b5e;
    }

    @media (max-width: 767px) {
        .mb-change-password-page {
            min-height: auto;
            padding: 20px 10px;
        }

        .mb-change-password-card .panel-body {
            padding: 18px 15px 15px;
        }
    }
</style>
<div class="mb-change-password-page">
    <div class="panel panel-default mb-change-password-card">
        <div class="panel-heading">
            <h3 class="panel-title text-center">
                <span class="glyphicon glyphicon-lock"></span>
                {{ 'change_password.submit'|trans }}
            </h3>
        </div>
        <div class="panel-body">
            {{ form_start(form, { 'action': path('fos_user_change_password'), 'attr': { 'class': 'form-horizontal' } }) }}

            <div class="form-group">
                {{ form_label(form.current_password, null, { 'label_attr': { 'class': 'col-sm-4 control-label' } }) }}
                <div class="col-sm-8">
                    {{ form_widget(form.current_password, { 'attr': { 'class': 'form-control', 'autofocus': 'autofocus' } }) }}
                    {% if form_errors(form.current_password) %}
                        <span class="text-danger">{{ form_errors(form.current_password) }}</span>
                    {% endif %}
                </div>
            </div>

            <div class="form-group">
                {{ form_label(form.plainPassword.first, null, { 'label_attr': { 'class': 'col-sm-4 control-label' } }) }}
                <div class="col-sm-8">
                    {{ form_widget(form.plainPassword.first, { 'attr': { 'class': 'form-control' } }) }}
                    {% if form_errors(form.plainPassword.first) %}
                        <span class="text-danger">{{ form_errors(form.plainPassword.first) }}</span>
                    {% endif %}
                </div>
            </div>

            <div class="form-group">
                {{ form_label(form.plainPassword.second, null, { 'label_attr': { 'class': 'col-sm-4 control-label' } }) }}
                <div class="col-sm-8">
                    {{ form_widget(form.plainPassword.second, { 'attr': { 'class': 'form-control' } }) }}
                    {% if form_errors(form.plainPassword.second) %}
                        <span class="text-danger">{{ form_errors(form.plainPassword.second) }}</span>
                    {% endif %}
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-8 col-sm-offset-4">
                    <button type="submit" class="btn btn-primary btn-block">
                        <span class="glyphicon glyphicon-ok"></span>
                        {{ 'change_password.submit'|trans }}
                    </button>
                </div>
            </div>

            {{ form_end(form) }}
        </div>
    </div>
</div>