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

{% block title %}

    {% if horse %}
        Edit Horse Record | EquiSeq
    {% else %}
        Add Horse Record | EquiSeq
    {% endif %}

{% endblock %}

{% block content %}

    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <div class="container">
        <p class="title title--subtitle">EquiSeq Horse Management System</p>

        {% if horse %}
            <h1 class="title">Edit a Horse - {{ horse.name }}</h1>
        {% else %}
            <h1 class="title">Add a Horse</h1>
        {% endif %}

        <form class="form" method="post" action="" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="form__wrapper">
                <div class="form__column">
                    <p class="title--group-title">Horse Information</p>
                    <div class="form__input-group{% if form.purpose.errors %} form__error{% endif %}">
                        {{ form.purpose.label_tag }}
                        <div>
                            {{ form.purpose }}
                        </div>
                        <p class="form__error-message">{{ form.purpose.errors.as_text }}</p>
                    </div>
                
                   <div class="form__input-group{% if form.public_status.errors %} form__error{% endif %}">
                        {{ form.public_status.label_tag }}
                        <div>
                            {{ form.public_status }}
                        </div>
                        <p class="form__error-message">{{ form.public_status.errors.as_text }}</p>
                    </div>

                   
                 
                    <div class="form__input-group {% if form.name.errors %} form__error {% endif %}">
                        {{ form.name.label_tag }} {{ form.name }}
                        <p class="form__error-message">{{ form.name.errors.as_text }}</p>
                    </div>
                    <div class="form__input-group">{{ form.nickname.label_tag }} {{ form.nickname }}</div>
                    <div class="form__input-group">
                        {{ form.owner.label_tag }}
                        {{ form.owner }}
                    </div>
                    <div class="form__input-group {% if form.year_birth.errors %} form__error {% endif %}">
                        {{ form.year_birth.label_tag }} {{ form.year_birth }}
                        <p class="form__error-message">{{ form.year_birth.errors.as_text }}</p>
                    </div>
                    <div class="form__input-group {% if form.year_death.errors %} form__error {% endif %}">
                        {{ form.year_death.label_tag }} {{ form.year_death }}
                        <p class="form__error-message">{{ form.year_death.errors.as_text }}</p>
                    </div>
                    <div class="form__input-group">{{ form.breed.label_tag }} {{ form.breed }}</div>
                    <div class="form__input-group">{{ form.sex.label_tag }} {{ form.sex }}</div>
                    <div class="form__input-group">{{ form.breed_registration.label_tag }} {{ form.breed_registration }}</div>
                </div>
                <div class="form__column">
                    <p class="title--group-title">Pedigree Information</p>
                    <div class="form__input-group">{{ form.pedigree_link.label_tag }} {{ form.pedigree_link }}</div>
                    <div class="form__input-group">{{ sire_form.pedigree_link.label_tag }} {{ sire_form.pedigree_link }}</div>
                    <div class="form__input-group">{{ sire_form.name.label_tag }} {{ sire_form.name }}</div>
                    <div class="form__input-group">{{ sire_form.breed.label_tag }} {{ sire_form.breed }}</div>
                    <div class="form__input-group">{{ sire_form.breed_registration.label_tag }} {{ sire_form.breed_registration }}</div>
                    <div class="form__input-group">{{ dam_form.pedigree_link.label_tag }} {{ dam_form.pedigree_link }}</div>
                    <div class="form__input-group">{{ dam_form.name.label_tag }} {{ dam_form.name }}</div>
                    <div class="form__input-group">{{ dam_form.breed.label_tag }} {{ dam_form.breed }}</div>
                    <div class="form__input-group">{{ dam_form.breed_registration.label_tag }} {{ dam_form.breed_registration }}</div>
                </div>
                <div class="form__column">
                    <p class="title--group-title">Genetic Information</p>

                    <div class="form__input-group-dna">{{ form.dna_fingerprint.label_tag }}
                        <div id="imagePreview">
                            {% if horse.dna_fingerprint %}
                                <img src="{{ horse.dna_fingerprint.url }}" alt="Genetic marker result" width="auto">
                            {% endif %}
                        </div>
                        {{ form.dna_fingerprint }}
                    </div>
                    <div class="form__input-group">{{ genes_form.MYOT.label_tag }} {{ genes_form.MYOT }}</div>
                    <div class="form__input-group">{{ genes_form.FLNC1.label_tag }} {{ genes_form.FLNC1 }}</div>
                    <div class="form__input-group">{{ genes_form.FLNC2.label_tag }} {{ genes_form.FLNC2 }}</div>
                    <div class="form__input-group">{{ genes_form.MYOZ3.label_tag }} {{ genes_form.MYOZ3 }}</div>
                    <div class="form__input-group">{{ genes_form.PYROXD1.label_tag }} {{ genes_form.PYROXD1 }}</div>
                    <div class="form__input-group">{{ genes_form.COL6A3.label_tag }} {{ genes_form.COL6A3 }}</div>
                    <div class="form__input-group">{{ genes_form.CACNA2D3.label_tag }} {{ genes_form.CACNA2D3 }}</div>
                    <div class="form__input-group">{{ genes_form.GYS1.label_tag }} {{ genes_form.GYS1 }}</div>
                    <div class="form__input-group">{{ genes_form.GBE1.label_tag }} {{ genes_form.GBE1 }}</div>
                    <div class="form__input-group">{{ genes_form.MYH1.label_tag }} {{ genes_form.MYH1 }}</div>
                    <div class="form__input-group">{{ genes_form.PPIB.label_tag }} {{ genes_form.PPIB }}</div>
                    <div class="form__input-group">{{ genes_form.RYR1.label_tag }} {{ genes_form.RYR1 }}</div>
                    <div class="form__input-group">{{ genes_form.SCN4A.label_tag }} {{ genes_form.SCN4A }}</div>
                    <div class="form__input-group">{{ genes_form.DYSF_allele_1.label_tag }} {{ genes_form.DYSF_allele_1 }}</div>
                    <div class="form__input-group">{{ genes_form.DYSF_allele_2.label_tag }} {{ genes_form.DYSF_allele_2 }}</div>

                    <button class="button button--special" type="submit">
                        {% if horse %}
                            Edit Horse
                        {% else %}
                            Add Horse
                        {% endif %}
                    </button>

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

    <!-- Include Select2 CSS and JS from CDN -->


    <script>
        $(document).ready(function () {
            // Initialize Select2 on the owner select field
            $('#id_owner').select2({
                placeholder: "Select an owner",
                allowClear: true
            });
        });
    </script>

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