{% extends 'fittings/base.html' %}

{% load aa_i18n %}
{% load i18n %}
{% load filters %}
{% load evelinks %}

{% block page_title %}{{ doctrine.name }} {% translate "Doctrine" %}{% endblock %}

{% block fittings_block %}
    {# modal start #}
    <div class="modal fade" id="deleteModal" role="dialog" tabindex="-1" aria-labelledby="modalTitle">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="modalTitle">{% translate "Are you sure?" %}</h4>
                </div>

                <div class="modal-body">
                    <p style="white-space: pre-line;">
                        {% translate "Are you sure you wish to delete this doctrine?" %}
                        <i><strong>{% translate "This action is permanent." %}</strong></i>
                    </p>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">{% translate "No - Close" %}</button>
                    <a href="{% url 'fittings:delete_doctrine' doctrine.pk %}" type="button" class="btn btn-danger">{% translate "Yes - Delete" %}</a>
                </div>
            </div>
        </div>
    </div>
    {# modal end #}

    <br>
    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="panel-title">
                        {% translate "Doctrine Information" %}

                        {% if perms.fittings.manage %}
                            <span data-toggle="modal" data-target="#deleteModal">
                                <button class="btn btn-xs btn-danger" style="float: right; margin-left: 5px;" data-toggle="tooltip" data-placement="top" title="{% translate 'Delete Doctrine' %}"><span class="fa fas fa-times"></span> </button>
                            </span>
                            <a href="{% url 'fittings:edit_doctrine' doctrine.pk %}" class="btn btn-xs btn-warning" style="float: right;" data-toggle="tooltip" data-placement="top" title="{% translate 'Edit Doctrine' %}"><span class="fa fas fa-pencil-alt"></span> </a>
                        {% endif %}
                    </div>
                </div>

                <div class="panel-body">
                    <img src="{{ doctrine.icon_url }}" class="img-rounded center-block text-center" alt="{{ doctrine.name }}">
                    <div class="text-center">{{ doctrine.name }}</div>
                    <div class="text-center">
                            {% for cat in d_cats %}
                                <span class="label" style="background-color: {{ cat.color }};"><a href="{% url 'fittings:view_category' cat.pk %}" class="nostyle">{{ cat.name }}</a></span>
                            {% endfor %}
                    </div>

                    <hr>

                    <dl>
                        <dt>{% translate "Description" %}</dt>
                        <dd>{{ doctrine.description|break_html_lines|striptags }}</dd>

                        {% if doctrine.created %}
                            <dt>{% translate "Created" %}</dt>
                            {% if LANGUAGE_CODE == 'ko' or LANGUAGE_CODE == 'ja' %}
                                <dd>{{ doctrine.created|date:'Y-m-d / H:i:s' }}</dd>
                            {% else %}
                                <dd>{{ doctrine.created|date:'d M Y H:i:s' }}</dd>
                            {% endif %}
                        {% endif %}

                        {% if doctrine.last_updated %}
                            <dt>{% translate "Last Updated" %}</dt>
                            {% if LANGUAGE_CODE == 'ko' or LANGUAGE_CODE == 'ja' %}
                                <dd>{{ doctrine.last_updated|date:'Y-m-d / H:i:s' }}</dd>
                            {% else %}
                                <dd>{{ doctrine.last_updated|date:'d M Y H:i:s' }}</dd>
                            {% endif %}
                        {% endif %}
                    </dl>
                </div>
            </div>
        </div>

        <div class="col-md-9">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">{% translate "Doctrine Fittings" %}</div>
                </div>

                <div class="panel-body">
                    {% if not fits %}
                        <div class="alert alert-warning text-center">{% translate "No Fittings Found" %}</div>
                    {% else %}
                        <table class="table table-hover dataTable" id="fitsTable">
                            <thead>
                                <tr>
                                    <th>{% translate "Ship Type" %}</th>
                                    <th>{% translate "Name" %}</th>
                                    <th>{% translate "Category" %}</th>
                                    <th>{% translate "Description" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                    {% for fit in fits %}
                                        <tr>
                                            <td>
                                                <a href="{% url 'fittings:view_fit' fit.pk %}" class="text-decoration-none d-inline-block">
                                                    <img class="img-rounded" src="{{ fit.ship_type_type_id|type_render_url:32 }}" title="{{ fit.ship_type.name }}" alt="{{ fit.ship_type.name }}">
                                                </a>
                                                {{ fit.ship_type.name }}
                                            </td>

                                            <td>
                                                <a href="{% url 'fittings:view_fit' fit.pk %}">{{ fit.name }}</a>
                                            </td>
                                            <td>
                                                {% for cat in f_cats|get_item:fit.pk %}
                                                    <span class="label" style="background-color: {{cat.color}};"><a href="{% url 'fittings:view_category' cat.pk %}" class="nostyle">{{cat.name}}</a></span>
                                                {% endfor %}
                                            </td>
                                            <td>{{ fit.description|linebreaks|urlize }}</td>
                                        </tr>
                                    {% endfor %}
                            </tbody>
                        </table>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_javascript %}
    {% include 'bundles/datatables-js.html' %}

    {% get_datatables_language_static LANGUAGE_CODE as DT_LANG_PATH %}

    <script>
        $(document).ready(() => {
            {% if fits %}
                $('#fitsTable').DataTable({
                    language: {
                        url: '{{ DT_LANG_PATH }}'
                    },
                    paging: false,
                    searching: false,
                    order: [[1, 'asc']]
                });
            {% endif %}

            $('[data-toggle="tooltip"]').tooltip();
        });
    </script>
{% endblock %}
