{% extends "hrapps/admin/base.html" %}
{% include "hrapps/delete_confirm_modal.html" %}

{% load i18n %}
{% load evelinks %}

{% block more_css %}
    {% include 'hrapps/bundles/builder-css.html' %}
{% endblock %}

{% block hrapps_content %}
<div class="row">
    <h3>{{ form.name }}</h3>
    <h4><img src="{{ form.corporation|corporation_logo_url:32 }}" alt="{{ form.corporation.corporation_name }} Logo"> <small class="text-body-secondary">{{ form.corporation.corporation_name }}</small></h4>
</div>
<div class="row">
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                {%  translate "Form Details" %}
                <div class="float-end">
                    <a href="{% url 'hradmin:edit_form' form.id %}" class="btn btn-xs btn-primary">
                        <span class="fa fa-edit"></span>
                    </a>
                    <a href="{% url 'hradmin:copy_form' form.id %}" class="btn btn-xs btn-dark">
                        <span class="fa fa-copy"></span>
                    </a>
                    <button
                            data-delete-url="{% url 'hradmin:delete_form' form.id %}"
                            class="btn btn-xs btn-danger"
                            onClick="showDeleteConfirmModal(this)">
                        <span class="fa fa-times"></span>
                    </button>
                </div>
            </div>
            <div class="card-body">
                <dl>
                    <dt>{% translate "Form Description" %}</dt>
                    <dd>{{ form.description|linebreaksbr|urlize }}</dd>
                </dl>
                <dl>
                    <dt>{% translate "Created" %}</dt>
                    <dd>
                        {% if LANGUAGE_CODE == 'ko' or LANGUAGE_CODE == 'ja' %}
                            {{ form.created|date:'Y-m-d / H:i:s' }}
                        {% else %}
                            {{ form.created|date:'d M Y H:i:s' }}
                        {% endif %}
                    </dd>
                </dl>
                {% if form.updated %}
                    <dl>
                        <dt>{% translate "Updated" %}</dt>
                        <dd>
                            {% if LANGUAGE_CODE == 'ko' or LANGUAGE_CODE == 'ja' %}
                                {{ form.updated|date:'Y-m-d / H:i:s' }}
                            {% else %}
                                {{ form.updated|date:'d M Y H:i:s' }}
                            {% endif %}
                        </dd>
                    </dl>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">{% translate "Form Preview" %}</div>
            <div class="card-body">
                {% for field in fields %}
                    <div class="card mb-2">
                        <div class="card-body">
                            {% with "hrapps/shared/partials/fields/form/"|add:field.type|add:".html" as field_partial %}
                                {% include field_partial with field=field disabled=True id=forloop.counter %}
                            {% endwith %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_javascript %}

    <script>
        function showDeleteConfirmModal(elem) {
            const deleteUrl = elem.dataset.deleteUrl;
            const deleteModal = document.getElementById("delete-modal");
            const deleteBtn = document.getElementById("delete-btn");
            deleteBtn.href = deleteUrl;
            const modal = new bootstrap.Modal(deleteModal);
            modal.show();
        }
    </script>
{% endblock %}