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

{% block title %} Genetic Profile: {{ horse.name }} | EquiSeq {% endblock title %}

{% block content %}
    <div class="container">
        <p class="title--subtitle">EquiSeq Horse Management System</p>
        <h1 class="title">{{ horse.name }}</h1>

        {% if horse.nickname %}
            <p class="horse-detail__nickname">{{ horse.nickname }}</p>
        {% endif %}

        {% if perms.horses.change_horse or horse.owner == request.user %}

            <div class="share-horse">
                <button id="share-horse__button">Share horse</button>

                <form class="share-horse__form" method="post" action="">
                    {% csrf_token %}
                    <p class="share-horse__action-title">Horse Status: </p>

                    <div class="public-horse-checkbox">
                        <label for="id_public_status"></label>
                        {{ horse_public_form.public_status }}
                    </div> 
                    
                    <input type="hidden" id="horse_id" name="horseId" value="{{ horse.uuid }}">
                </form>
            </div>
        {% endif %}

        <div class="horse-detail">
            <div class="horse-detail__column">
                <p class="horse-detail__table-title">Horse Information</p>
                <table class="horse-detail__table">
                    <tr>
                        <th class="horse-detail__table-header" scope="row">Owner</th>
                        <td class="horse-detail__table-data">
                            {% if horse.owner %}
                                <a class="horse-detail__link" href="{% url 'users:detail' horse.owner.username %}">
                                    {{ horse.owner|default:'Not Assigned' }}</a>
                            {% else %}
                                Not Assigned
                            {% endif %}
                        </td>

                    </tr>
                    <tr>
                        <th class="horse-detail__table-header" scope="row">Owner Email</th>
                        <td class="horse-detail__table-data">{{ horse.owner.email|default:'' }}</td>
                    </tr>
                    <tr>
                        <th class="horse-detail__table-header" scope="row">

                            {% if not horse.year_death %}
                                Year Of Birth
                            {% else %}
                                Lifespan
                            {% endif %}

                        </th>
                        <td class="horse-detail__table-data">
                            {{ horse.year_birth|default:'Unknown' }} {% if horse.year_death %} - {{ horse.year_death }} {% endif %}
                        </td>
                    </tr>

                    {% if horse.breed %}
                        <tr>
                            <th class="horse-detail__table-header" scope="row">Breed</th>
                            <td class="horse-detail__table-data">{{ horse.breed }}</td>
                        </tr>
                    {% endif %}

                  {% if horse.breed_registration and horse.breed_registration != '0' %}
                        <tr>
                            <th class="horse-detail__table-header" scope="row">Registration#</th>
                            <td class="horse-detail__table-data">{{ horse.breed_registration }}</td>
                        </tr>
                    {% endif %}

                    {% if horse.sex %}
                        <tr>
                            <th class="horse-detail__table-header" scope="row">Sex</th>
                            <td class="horse-detail__table-data">{{ horse.sex }}</td>
                        </tr>
                    {% endif %}

                    {% if horse.pedigree_link %}
                        <tr>
                            <th class="horse-detail__table-header" scope="row">Pedigree</th>
                            <td class="horse-detail__table-data">
                                <a class="horse-detail__link" href="{{ horse.pedigree_link }}" target="_blank">
                                    View Full Pedigree </a>
                            </td>
                        </tr>
                    {% endif %}

                </table>

                {% if horse.sire %}
                    <p class="horse-detail__table-title">Sire</p>
                    <table class="horse-detail__table">

                        {% if horse.sire.name %}
                            <tr>
                                <th class="horse-detail__table-header" scope="row">Name</th>
                                <td class="horse-detail__table-data">

                                    {% if horse.sire.pedigree_link %}
                                        <a class="horse-detail__link" href="{{ horse.sire.pedigree_link }}"
                                           target="_blank">{{ horse.sire.name }}</a>
                                    {% else %}
                                        {{ horse.sire.name }}
                                    {% endif %}

                                </td>
                            </tr>
                        {% endif %}

                        {% if horse.sire.breed %}
                            <tr>
                                <th class="horse-detail__table-header" scope="row">Breed</th>
                                <td class="horse-detail__table-data">{{ horse.sire.breed }}</td>
                            </tr>
                        {% endif %}

                        {% if horse.sire.breed_registration %}
                            <tr>
                                <th class="horse-detail__table-header" scope="row">Registration#</th>
                                <td class="horse-detail__table-data">{{ horse.sire.breed_registration }}</td>
                            </tr>
                        {% endif %}

                        {% if not horse.sire.name and horse.sire.pedigree_link %}
                            <tr>
                                <th class="horse-detail__table-header" scope="row">Pedigree</th>
                                <td class="horse-detail__table-data">
                                    <a href="{{ horse.sire.pedigree_link }}" target="_blank">View Full Pedigree </a>
                                </td>
                            </tr>
                        {% endif %}

                    </table>
                {% endif %}

                {% if horse.dam %}
                    <p class="horse-detail__table-title">Dam</p>
                    <table class="horse-detail__table">

                        {% if horse.dam.name %}
                            <tr>
                                <th class="horse-detail__table-header" scope="row">Name</th>
                                <td class="horse-detail__table-data">

                                    {% if horse.dam.pedigree_link %}
                                        <a class="horse-detail__link" href="{{ horse.dam.pedigree_link }}"
                                           target="_blank">{{ horse.dam.name }}</a>
                                    {% else %}
                                        {{ horse.dam.name }}
                                    {% endif %}

                                </td>
                            </tr>
                        {% endif %}

                        {% if horse.dam.breed %}
                            <tr>
                                <th class="horse-detail__table-header" scope="row">Breed</th>
                                <td class="horse-detail__table-data">{{ horse.dam.breed }}</td>
                            </tr>
                        {% endif %}

                        {% if horse.dam.breed_registration %}
                            <tr>
                                <th class="horse-detail__table-header" scope="row">Registration#</th>
                                <td class="horse-detail__table-data">{{ horse.dam.breed_registration }}</td>
                            </tr>
                        {% endif %}

                        {% if not horse.dam.name and horse.dam.pedigree_link %}
                            <tr>
                                <th class="horse-detail__table-header" scope="row">Pedigree</th>
                                <td class="horse-detail__table-data">
                                    <a href="{{ horse.dam.pedigree_link }}" target="_blank">View Full Pedigree </a>
                                </td>
                            </tr>
                        {% endif %}

                    </table>

                {% endif %}

            </div>
            <div class="horse-detail__column">

                {% if horse.dna_fingerprint %}
                    <p class="horse-detail__table-title">DNA Fingerprint</p>
                    <img class="horse-detail__dna-fingerprint" src="{{ horse.dna_fingerprint.url }}"
                         alt="Genetic marker result" width="100%" height="auto">
                {% endif %}

                <div class="horse-detail__title-container">
                    <p class="horse-detail__table-title">Genetic Test Results</p>
                    <button id="legend-button" class="horse-detail__legend-button">View Legend</button>
                </div>
                <ul id="genes-legend" class="horse-detail__legend">
                    <li>HYPP = Hyperkalemic Periodic Paralysis</li>
                    <li>HERDA = Hereditary equine regional dermal asthenia</li>
                    <li>GBED = Glycogen branching enzyme deficiency</li>
                    <li>MH = Malignant Hyperthermia</li>
                    <li>PSSM1 = Polysaccharide Storage Myopathy - Type 1</li>
                    <li>PSSM2 = Polysaccharide Storage Myopathy - Type 2</li>
                    <li>MFM = Myofibrillar Myopathy</li>
                    <li>RER = Recurrent Exertional Rhabdomyolysis</li>
                    <li>IMM = Immune-Mediated Myositis</li>
                </ul>
                <table class="test-result">

                    {% for mutation in mutations %}
                        {% if mutation.result %}
                            <tr>
                                <th class="test-result__gene-name">
                                    {{ mutation.name }}
                                    <p class="test-result__gene-description">{{ mutation.result_description }}</p>
                                </th>
                                <td class="test-result__gene-result {{ mutation.result_type }}">
                                    {{ mutation.result }}</td>
                            </tr>
                        {% endif %}
                    {% endfor %}

                </table>

                {% if perms.horses.change_horse %}
                    <a class="button button--special" href="{% url 'horses:horse-edit' horse.uuid %}">Edit Horse
                        Record</a>
                {% endif %}
            </div>
        </div>
    </div>

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