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

{% set breadcrumb = buildBreadcrumb([{'route': 'app_profile_index', 'trans': 'menu.profile'}]) %}

{% block title %}
    {{ renderTitle(breadcrumb)  }}
{% endblock %}

{% block breadcrumb %}
    {{ renderBreadcrumb(breadcrumb)  }}
{% endblock %}

{% block content %}
    <div class="title-block">
        <h1>{{ 'menu.profile'|trans }}</h1>
    </div>

    <div class="content-block">
        <div class="block-element">
            <div class="row">
                <h2 class="header col s12 l5 offset-l1 xl3 offset-xl3">{{ 'title.disk_usage'|trans }}</h2>
            </div>
            <div class="pie-wrapper">
                {% set percent = (getSpaceUsedByUser(app.user) * 100 / app.user.diskSpaceAllowed)|round(0, 'floor') %}
                <span class="label">{{ percent }}<span class="smaller">%</span></span>
                <div class="pie {{ percent > 50 ? 'above50' : '' }}">
                    <div class="left-side half-circle" style="-webkit-transform: rotate({{ percent*360/100 }}deg); transform: rotate({{ percent*360/100 }}deg);"></div>
                    <div class="right-side half-circle"></div>
                </div>
                <div class="shadow"></div>
            </div>
            <div class="pie-stat">{{ getSpaceUsedByUser(app.user)|bytes }}/{{ app.user.diskSpaceAllowed|bytes }}</div>
        </div>

        <div class="block-element">
            <div class="row">
                <h2 class="header col s12 l5 offset-l1 xl3 offset-xl3">{{ 'title.update_profile'|trans }}</h2>
            </div>

            {{ form_start(form) }}
                {{ form_row(form.file) }}

                <div class="row">
                    <div class="col s12 l5 offset-l1 xl3 offset-xl3">
                        {{ form_row(form.plainPassword.first, {'label' : 'label.password', 'attr': {'autocomplete' : 'new-password'}} ) }}
                    </div>
                    <div class="col s12 l5 xl3">
                        {{ form_row(form.plainPassword.second, {'label' : 'label.repeat_password'} ) }}
                    </div>
                </div>

                <div class="row center-align form-btn-holder">
                    <button type="submit" class="btn waves-effect waves-light">{{ 'btn.submit'|trans }}</button>
                </div>
            {{ form_end(form) }}
        </div>
    </div>
{% endblock %}