{% extends 'viewflow/base_page.html' %}
{% load i18n viewflow %}


{% block title %}{{ title }} - {{ block.super }}{% endblock %}
{% block page-title %}{% trans "Profile" %}{% endblock %}

{% block page-menu-app %}
  <vf-page-menu-navigation class="mdc-list">
    <div class="mdc-list-group">
      <a class="mdc-list-item mdc-list-item--with-one-line mdc-list-item--with-leading-icon vf-page__menu-list-item vf-page-navigation__ignore" href="/">
        <span class="mdc-list-item__start"><i class="material-icons">arrow_back</i></span>
        <span class="mdc-list-item__content">{% trans 'View site' %}</span>
      </a>
      {% url 'profile' as profile_url %}
      {% if profile_url %}
        <a class="mdc-list-item mdc-list-item--with-one-line mdc-list-item--with-leading-icon vf-page__menu-list-item" href="{{ profile_url }}">
          <span class="mdc-list-item__start"><i class="material-icons">account_box</i></span>
          <span class="mdc-list-item__content">{% trans 'Profile' %}</span>
        </a>
      {% endif %}
    </div>
  </vf-page-menu-navigation>
{% endblock %}

{% block content %}
  <div class="mdc-layout-grid vf-page__grid">
    <div class="mdc-layout-grid__inner vf-page__grid-inner">
      <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-10-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone">
        <div class="mdc-card vf-card">
          <section class="vf-card__header">
            <h1 class="vf-card__title">{{ title }}</h1>
          </section>
          <vf-form>
            <form class="vf-form" method="POST" {% if form.is_multipart %} enctype="multipart/form-data"{% endif %}>
              {% csrf_token %}
              <section class="vf-card__form">
                {% render form view.layout %}
              </section>
              <section class="mdc-card__actions vf-card__actions">
                <button class="mdc-button mdc-card__action mdc-card__action--button mdc-button--raised" type="submit">{% trans "Change" %}</button>
              </section>
            </form>
          </vf-form>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
