{% extends "base.html" %}
{% comment %}
SPDX-License-Identifier: GPL-3.0-or-later
{% endcomment %}
{% load i18n perms %}

{# Use a fluid-width container #}
{% block containertype %}container-fluid{% endblock %}

{% block content %}
<div class="row mt-4">
    <div class="col-xl-4">
        {% block profile_info %}
        <div class="card bg-light" id="card-infos">
            <h4 class="card-header text-center">
                {{ family.name }}
            </h4>
            <div class="text-center">
                <a href="{% url 'family:update_pic' family.pk  %}">
                    <img src="{{ family.display_image.url }}" class="img-thumbnail mt-2">
                </a>
            </div>
            <div class="card-body" id="profile_infos">
                {% include "family/family_info.html" %}
            </div>
            <div class="card-footer">
                {% if can_add_members %}
                <a class="btn btn-sm btn-success" href="{% url 'family:family_add_member' family_pk=family.pk %}"
                   data-turbolinks="false"> {% trans "Add member" %}</a>
                {% endif %}
                {% if ".change_"|has_perm:family %}
                <a class="btn btn-sm btn-secondary" href="{% url 'family:family_update' pk=family.pk %}"
                   data-turbolinks="false">
                    <i class="fa fa-edit"></i> {% trans 'Update Profile' %}
                </a>
                {% endif %}
                {% url 'family:family_detail' family.pk as family_detail_url %}
                {% if request.path_info != family_detail_url %}
                <a class="btn btn-sm btn-primary" href="{{ family_detail_url }}">{% trans 'View Profile' %}</a>
                {% endif %}
                <a class="btn btn-sm btn-primary" href="{% url "family:family_list" %}">
                    {% trans "Return to the family list" %}
                  </a>
            </div>
        </div>
        {% endblock %}
    </div>
    <div class="col-xl-8">
        {% block profile_content %}{% endblock %}
    </div>
</div>
{% endblock %}