{% extends 'fittings/base.html' %}
{% load i18n %}
{% load humanize %}
{% load filters %}
{% load static %}
{% load evelinks %}

{% block more_css %}
    <style>
        .tp {
            padding-bottom: 0;
        }
        .btm {
            padding-top: 5px;
            padding-left: 0;
            padding-right: 0;
        }
        .pd {
            padding-left: 15px;
            padding-right: 15px;
        }
        .mv {
            margin-left: 15px;
        }
    </style>
    {% include 'bundles/datatables-css.html' %}
{% endblock %}

{% block page_title %}{% translate "View Category" %}{% endblock %}

{% block fittings_block %}
    <div>
        <div class="panel panel-default">
            <div class="panel-heading">
                {% translate "Category" %}
                {% if perms.fittings.manage %}
                    <div class="pull-right" style="margin-top: -2px !important;">
                       <a href="{% url 'fittings:edit_category' cat.pk %}" type="button" class="btn btn-xs btn-warning" data-toggle="tooltip" data-placement="top" title="{% translate 'Edit Category' %}">
                           <span class="fa fas fa-pencil-alt"></span>
                       </a>
                        <a href="{% url 'fittings:delete_category' cat.pk %}" type="button" class="btn btn-xs btn-danger" data-toggle="tooltip" data-placement="top" title="{% translate 'Delete Category' %}">
                            <span class="fa fas fa-times"></span>
                        </a>
                    </div>
                {% endif %}
            </div>

            <div class="panel-body tp">
                <strong>{% translate "Name" %}: </strong>
                <br/>
                <span class="label" style="background-color: {{cat.color}}">{{cat.name}}</span>
                <div id="spacer" style="padding-top: 5px;"></div>
                {% if perms.fittings.manage %}
                    <strong>{% translate "Groups" %}: </strong>
                    <br />
                    {% if cat.groups.all|length != 0 %}
                      {% for group in cat.groups.all %} <span class="label label-primary">{{group.name}}</span> {% endfor %}
                    {% else %}
                      <span class="label label-warning">{% translate "Category is public" %}</span>
                    {% endif %}
                {% endif %}
            </div>

            <div class="panel-body btm">
                <ul class="nav nav-tabs" style="margin-bottom: 10px;">
                    <li class="active mv"><a data-toggle="tab" href="#doctrines">{% translate "Doctrines" %}</a></li>
                    <li><a data-toggle="tab" href="#fittings">{% translate "Fittings" %}</a></li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane fade-in active panel-default pd" id="doctrines">
                        <table class="table table-striped dataTable" role="table" id="docTable">
                            <thead>
                                <th> </th>
                                <th>{% translate "Name" %}</th>
                                <th>{% translate "Categories" %}</th>
                                <th>{% translate "Description" %}</th>
                                <th>{% translate "Ships" %}</th>
                            </thead>

                            <tbody>
                                {% if not docs %}
                                    <tr>
                                        <td colspan="5">
                                            <div class="alert alert-warning" style="text-align: center"> {% translate "No Doctrines Found" %} </div>
                                        </td>
                                    </tr>
                                {% else %}
                                    {% for doc in docs %}
                                        <tr>
                                            <td> <a href="{% url 'fittings:view_doctrine' doc.pk %}"><img src="{{ doc.icon_url }}" class="img-circle" style="display: block; margin: auto;"/> </a></td>
                                            <td> <a href="{% url 'fittings:view_doctrine' doc.pk %}">{{ doc.name }}</a> </td>
                                            <td>
                                                {% for cate in doc.category.all %}
                                                <span class="label" style="background-color: {{cate.color}}"><a href="{% url 'fittings:view_category' cate.pk %}" class="nostyle">{{cate.name}}</a></span>
                                                {% endfor %}
                                            </td>
                                            <td> {{ doc.description }} </td>
                                            <td>
                                                {% for fitting in doc_dict|get_item:doc.pk %}
                                                    <img src="{{ fitting.ship_type_type_id|type_render_url:32 }}" class="img-circle" data-toggle="tooltip" data-placement="bottom" title="{{ fitting.ship_type.type_name }}"/>
                                                {% endfor %}
                                            </td>
                                        </tr>
                                    {% endfor %}
                                {% endif %}
                            </tbody>
                        </table>
                    </div>

                    <div class="tab-pane fade-in panel-default pd" id="fittings">
                        <table class="table table-hover dataTable" id="fitTable">
                            <thead>
                                <th>{% translate "Name" %}</th>
                                <th>{% translate "Categories" %}</th>
                                <th>{% translate "Description" %}</th>
                                <th>{% translate "Ship Type" %}</th>
                            </thead>

                            <tbody>
                                {% if not fits %}
                                    <tr>
                                        <td colspan="4">
                                            <div class="alert alert-warning" style="text-align: center"> {% translate "No Fits Found" %} </div>
                                        </td>
                                    </tr>
                                {% else %}
                                    {% for fit in fits %}
                                        <tr>
                                            <td><a href="{% url 'fittings:view_fit' fit.pk %}">{{ fit.name }}</a></td>
                                            <td>
                                                {% for cate in cats|get_item:fit.pk %}
                                                <span class="label" style="background-color: {{cate.color}}"><a href="{% url 'fittings:view_category' cate.pk %}" class="nostyle">{{cate.name}}</a></span>
                                                {% endfor %}
                                            </td>
                                            <td>{{ fit.description }}</td>
                                            <td><img class="img-circle" src="{{ fit.ship_type_type_id|type_render_url:128 }}" style="height: 32px; width: 32px;" title="{{ fit.ship_type.type_name }}"> {{ fit.ship_type.type_name }}</td>
                                        </tr>
                                    {% endfor %}
                                {% endif %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

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

{% block extra_script %}
    $(document).ready(function(){
        $('#docTable').DataTable({
            "order": [[ 1, "asc" ]],
        });
        $('[data-toggle="tooltip"]').tooltip();
        $('#fitTable').DataTable();
        $('[data-toggle="tooltip"]').tooltip();
    })
{% endblock %}
