{% extends 'fittings/base.html' %}
{% load i18n %}
{% load humanize %}
{% load filters %}
{% load static %}
{% 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">
                    {% 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 class="panel-body">
                    <img src="{{ doctrine.icon_url }}" class="img-circle center-block" style="text-align: center"/>
                    <h4 style="text-align: center">{{ doctrine.name }}</h4>
                    <h5 style="text-align: 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 %}
                    </h5>
                    <hr />
                    <dl>
                        <dt>{% translate "Description" %}</dt>
                        <dd>{{ doctrine.description|break_html_lines|striptags }}</dd>
                        <dt>{% translate "Created" %}</dt>
                        <dd>{{ doctrine.created|date:'d M Y H:i:s' }}</dd>
                        {% if doctrine.last_updated %}
                            <dt>{% translate "Last Updated" %}</dt>
                            <dd>{{ doctrine.last_updated|date:'d M Y H:i:s' }}</dd>
                        {% endif %}
                    </dl>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="panel panel-default">
                <div class="panel-heading">{% translate "Doctrine Fits" %}</div>
                <div class="panel-body">
                    {% if not fits %}
                        <div class="alert alert-warning" style="text-align: center">{% translate "No Fits Found" %}</div>
                    {% else %}
                        <table class="table table-hover dataTable" id="fitsTable">
                            <thead>
                                <th>{% translate "Ship Type" %}</th>
                                <th>{% translate "Name" %}</th>
                                <th>{% translate "Category" %}</th>
                                <th>{% translate "Description" %}</th>
                            </thead>
                            <tbody>
                                {% for fit in fits %}
                                    <tr>
                                        <td><img class="img-circle" src="{{ fit.ship_type_type_id|type_render_url:32 }}" title="{{ fit.ship_type.type_name }}"> {{ fit.ship_type.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 }} </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

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

{% block extra_script %}
     $(document).ready(function(){
        $('#fitsTable').DataTable();
        $('[data-toggle="tooltip"]').tooltip();
    })
{% endblock %}
