{#{% extends "base.html" %}#}
{##}
{#{% load static %}#}
{##}
{#{% block title %}#}
{#    Profile: {{ object.username }} | EquiSeq#}
{#{% endblock title %}#}
{##}
{#{% block content %}#}
{#    <div class="container">#}
{#    <p class="title title--subtitle">EquiSeq Horses Management System</p>#}
{#    <h1 class="title">User Profile</h1>#}
{#    <div class="user-profile ">#}
{##}
{#        <div class="user-profile__column">#}
{#            <p class="user-profile__title">#}
{#                {{ object.username|default:'' }}#}
{#            </p>#}
{#            <div class="user-profile__user-data">#}
{#                <img class="user-profile__image" src="{{ object.avatar.url }}" alt="" width="200px" height="auto">#}
{#               <div> <p> Username: {{ object.username|default:'' }}</p>#}
{#                <p> Firs Name: {{ object.first_name|default:'' }}</p>#}
{#                <p> Last Name: {{ object.last_name|default:''}}</p>#}
{#                   <p> E-mail: {{ object.email|default:'' }}</p></div>#}
{#            </div>#}
{#        <a class="button " href="{% url 'users:update' %}" role="button">My Info</a>#}
{#            #}
{#        </div>#}
{##}
{#        <div class="user-profile__column">#}
{#            <p class="user-profile__title">#}
{#                Horses#}
{#            </p>#}
{#            <div class="user-profile__user-data">#}
{#            <ul class="user-horses__list">#}
{#                {% for horse in user.horse_set.all %}#}
{#                    <li>#}
{#                        <a class="horses-list__link horses-list__users-horses"#}
{#                           href="{% url 'horses:horse-detail' uuid=horse.uuid %}">{{ horse.name }}</a>#}
{#                    </li>#}
{#                {% endfor %}#}
{#            </ul>#}
{#            </div>#}
{#        </div>#}
{#    </div>#}
{##}
{#{% endblock content %}#}


{% extends 'base.html' %}
{% load static i18n %}

{% block title %}
    Profile: {{ object.username }} | EquiSeq
{% endblock title %}

{% block content %}
    <div class="container">
        <p class="title--subtitle">EquiSeq Horse Management System</p>
        <h1 class="title">{{ object.username|default:'' }}</h1>
    
        <div class="horse-detail">
            <div class="horse-detail__column horse-detail__column--user-detail">
                <p class="horse-detail__table-title">User Profile</p>
                <table class="horse-detail__table">
                    <tr>
                        <th class="horse-detail__table-header" scope="row">Username</th>
                        <td class="horse-detail__table-data">{{ object.username|default:'' }}</td>
                    </tr>
                    <tr>
                        <th class="horse-detail__table-header" scope="row">Firs Name</th>
                        <td class="horse-detail__table-data">{{ object.first_name|default:'' }}</td>
                    </tr>
                    <tr>
                        <th class="horse-detail__table-header" scope="row">Last Name</th>
                        <td class="horse-detail__table-data">{{ object.last_name|default:'' }}</td>
                    </tr>
                    <tr>
                        <th class="horse-detail__table-header" scope="row">Email</th>
                        <td class="horse-detail__table-data">{{ object.email|default:'' }}</td>
                    </tr>
                </table>


            </div>
            <div class="horse-detail__column">
                <p class="horse-detail__table-title">Horses</p>
            
                <table class="horse-detail__table">
                    <tr>
                        <th class="horse-detail__table-header" scope="row">Horse Number</th>
                        <th style="text-align:start" class="horse-detail__table-header" scope="row">Horse Name</th>
                    </tr>

                    {% for horse in user.horse_set.all %}

                        <tr>
                            <td class="horse-detail__table-header"><a class="horse-detail__link--no-icon"
                                                                      href="{% url 'horses:horse-detail' uuid=horse.uuid %}">{{ horse.number }}</a>
                            </td>
                            <td style="text-align:start" class="horse-detail__table-header"><a
                                    class="horse-detail__link--no-icon"
                                    href="{% url 'horses:horse-detail' uuid=horse.uuid %}">{{ horse.name }}</a>
                            </td>

                        </tr>
                        
                    {% endfor %}
                </table>

            </div>
        </div>
    </div>

    <script src="{% static 'js/horse/pages/detail.js' %}"></script>
{% endblock %}