{% load foundation %}
{% load bootstrap4 %}
{% load static %}

<h5>{% trans 'Core Data' %}</h5>
<div class="row">
    <div class="col-md-2">
        {% bootstrap_field form.salutation %}
    </div>
    <div class="col-md-3">
        {% bootstrap_field form.first_name %}
    </div>
    <div class="col-md-3">
        {% bootstrap_field form.middle_name %}
    </div>
    <div class="col-md-3">
        {% bootstrap_field form.last_name %}
    </div>
    <div class="col-md-1">
        {% bootstrap_field form.suffix %}
    </div>
</div>
<div class="row">
    <div class="col-md-3">
        {% bootstrap_field form.department %}
    </div>
    <div class="col-md-3">
        {% bootstrap_field form.institution %}
    </div>
    <div class="col-md-3">
        {% bootstrap_field form.country %}
    </div>
    <div class="col-md-3">
        {% bootstrap_field form.preferred_timezone %}
    </div>
</div>
<hr />
<h5>{% trans 'Social Media and Accounts' %}</h5>
<div class="row">
    <div class="col-md-4">
        {% bootstrap_field form.twitter %}
    </div>
    <div class="col-md-4">
        {% bootstrap_field form.facebook %}
    </div>
    <div class="col-md-4">
        {% bootstrap_field form.orcid %}
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        {% bootstrap_field form.github %}
    </div>
    <div class="col-md-4">
        {% bootstrap_field form.linkedin %}
    </div>
    <div class="col-md-4">
        {% bootstrap_field form.website %}
    </div>
</div>
<hr />
<h5>{% trans 'Biography and Signature' %}</h5>
<div class="row">
    <div class="col-md-6">
        {% bootstrap_field form.biography %}
    </div>
    <div class="col-md-6">
        {% bootstrap_field form.signature %}
    </div>
    <div class="col-md-12">
        <label for="id_interests">{% trans 'Review Interests' %}</label>
        <input type="text" id="id_interests" name="interests" value="{% for interest in user_to_edit.interest.all %}{{ interest }}{% if not forloop.last %},{% endif %}{% endfor %}"/> {% trans 'Hit Enter to add a new interest' %}.
    </div>
</div>

<h5>{% trans 'Profile Image' %}</h5>
<div class="row">
    <div class="col-md-3">
        {% if user_to_edit.profile_image %}
        <img src="{{ user_to_edit.profile_image.url }}" class="thumbnail editorial-image" alt="Image of {{ user_to_edit.full_name }}">
        {% else %}
        <img src="{% static "common/img/icons/users.png" %}" class="thumbnail editorial-image" alt="Generic profile image, two silhouettes against the sun going down">
        {% endif %}
    </div>
    <div class="col-md-9">
        {% bootstrap_field form.profile_image %}
    </div>


</div>
<hr />
<h5>{% trans 'Options' %}</h5>
<div class="row">
    <div class="col-md-4">
        {% bootstrap_field form.enable_public_profile %}
    </div>
</div>