{% extends "base_beer.html" %}
{% load static i18n %}
{% block title %}{% trans "Your Profile" %}{% endblock %}

{% block content %}
<div class="large-space"></div>

<div class="grid">
  <div class="s12 m10 l8 xl6 middle-align center-align" style="margin: 0 auto;">
    <article class="round elevate">
      <div class="padding">
          <h4 class="center-align primary-text">{% trans "Edit your profile" %}</h4>
      </div>

      <form method="post" enctype="multipart/form-data" novalidate>
        {% csrf_token %}

        {% if form.non_field_errors %}
          <div class="padding error surface round mb">
             {% for err in form.non_field_errors %}
                <div class="row align-center">
                    <i class="error-text">warning</i>
                    <span class="error-text">{{ err }}</span>
                </div>
             {% endfor %}
          </div>
        {% endif %}

        <div class="grid">
            <div class="s12 m6">
                <div class="field label border round {% if form.first_name.errors %}error{% endif %}">
                    <input type="text" name="{{ form.first_name.name }}" id="{{ form.first_name.id_for_label }}" value="{{ form.first_name.value|default:'' }}">
                    <label>{% trans "First name" %}</label>
                    {% if form.first_name.errors %}
                        <span class="helper error-text">{{ form.first_name.errors.0 }}</span>
                    {% endif %}
                </div>
            </div>
             <div class="s12 m6">
                <div class="field label border round {% if form.last_name.errors %}error{% endif %}">
                    <input type="text" name="{{ form.last_name.name }}" id="{{ form.last_name.id_for_label }}" value="{{ form.last_name.value|default:'' }}">
                    <label>{% trans "Last name" %}</label>
                     {% if form.last_name.errors %}
                        <span class="helper error-text">{{ form.last_name.errors.0 }}</span>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="field label border round {% if form.email.errors %}error{% endif %}">
            <input type="email" name="{{ form.email.name }}" id="{{ form.email.id_for_label }}" value="{{ form.email.value|default:'' }}">
            <label>{% trans "Email" %}</label>
            {% if form.email.errors %}
                <span class="helper error-text">{{ form.email.errors.0 }}</span>
            {% endif %}
        </div>

        <div class="field label border round textarea {% if form.bio.errors %}error{% endif %}">
            <textarea name="{{ form.bio.name }}" id="{{ form.bio.id_for_label }}" rows="3">{{ form.bio.value|default:'' }}</textarea>
            <label>{% trans "Bio" %}</label>
            {% if form.bio.errors %}
                 <span class="helper error-text">{{ form.bio.errors.0 }}</span>
            {% endif %}
        </div>

        <div class="field middle-align {% if form.avatar.errors %}error{% endif %}">
             <nav>
                <div class="max">
                    <label class="button border transparent round">
                        <input type="file" name="{{ form.avatar.name }}" id="{{ form.avatar.id_for_label }}" accept="image/*">
                        <i>upload</i>
                        <span>{% trans "Upload Profile Picture" %}</span>
                    </label>
                </div>
                 {% if user.avatar %}
                    <img src="{{ user.avatar.url }}" class="circle small">
                 {% endif %}
            </nav>
            {% if form.avatar.errors %}
                 <span class="helper error-text">{{ form.avatar.errors.0 }}</span>
            {% endif %}
        </div>

        <div class="large-space"></div>

        <nav class="right-align">
            <a class="button transparent border round" href="{% url 'index' %}">{% trans "Cancel" %}</a>
            <button type="submit" class="button primary round">{% trans "Save changes" %}</button>
        </nav>

      </form>
    </article>
  </div>
</div>
{% endblock %}