{% extends 'base.html' %}

{% load static i18n %}

{% block title %} Public Horses | EquiSeq {% endblock title %}

{% block content %}

    <div class="container">
        <p class="title title--subtitle">EquiSeq Horse Management System</p>
        <h1 class="title">List of Public Horses</h1>
        <div class="horses-list">
            <table id="horses-list" class="horses-list__table">
                <thead>
                <tr>
                    <th class="horse-list-table__name">Horse Name</th>
                    <th class="horse-list-table__number">Owner Username</th>
                    <th class="horse-list-table__breed">Horse Breed</th>
                </tr>
                </thead>
                <tbody>

                {% for horse in horses %}
                    {% if horse.public_status == 'Public' %}
                        <tr>
                            <td>
                                <a class="horses-list__link"
                                   href="{% url 'horses:horse-detail' horse.uuid %}">{{ horse.name }}</a>
                            </td>
                            <td>{{ horse.owner }}</td>
                            <td>{{ horse.breed|default:"" }}</td>
                        </tr>
                    {% endif %}
                {% endfor %}

                </tbody>
            </table>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="{% static 'js/horse/pages/public.js' %}"></script>

{% endblock %}