{% extends 'layouts/two_pane_single.html' %}
{% load i18n %}
{% load bootstrap4 %}

{% block content_main %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
    <h2>{% trans 'Profile' %}</h2>
</div>
<div class="container">
  <div class="row">
    <h3>{% trans 'Basic information' %}</h3>
    <table class="table table-bordered">
      <tbody>
        <tr><th>ID</th><td>{{ request.user.id }}</td></tr>
        <tr><th>{% trans 'Username' %}</th><td>{{ request.user.username }}</td></tr>
        <tr><th>{% trans 'Email address' %}</th><td>{{ request.user.email }}</td></tr>
        <tr><th>{% trans 'Full name' %}</th><td>{{ request.user.get_full_name }}</td></tr>
      </tbody>
    </table>
  </div>
  <div class="row">
    {% trans 'Edit profile' as profile_edit_label %}
    {% url 'accounts:profile-edit' as profile_edit_url %}
    {% bootstrap_button profile_edit_label href=profile_edit_url %}
  </div>
  <h3>{% trans 'Set language' %}</h3>
  <div class="row">
    <div>
      <form class="form-inline" action="{% url 'set_language' %}" method="post">
        {% csrf_token %}
        {% bootstrap_form language_form layout='inline' %}
        　
        {% trans 'Apply' as apply_label %}
        {% bootstrap_button apply_label 'submit' %}
      </form>
    </div>
  </div>
</div>
{% endblock %}