{% extends 'structures/base.html' %}
{% load i18n %}
{% load humanize %}
{% load bootstrap %}
{% load static %}

{% block details %}
    
    <div class="panel panel-primary">   
        <div class="panel-heading">
            <h3 class="panel-title">{% trans "Structure List" %}</h3>
        </div>
        <div class="panel-body">        
            <div class="table-responsive">
                                
                <!-- Tags Filter Button -->                
                <span class="pull-right">                    
                    {% if tags_exist %}                        
                        {% if active_tags %}
                            <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#modalTagsFilter">
                            {% trans "Tags Filter (Active)" %}
                            </button>                        
                        {% else %}
                            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalTagsFilter">                                
                                {% trans "Tags Filter" %}
                            </button>
                        {% endif %}
                    {% else %}
                        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalTagsFilter" disabled="disabled">
                            {% trans "Tags Filter" %}
                        </button>                        
                    {% endif %}
                </span>

                <!-- Tags Filter Modal -->
                <div class="modal" id="modalTagsFilter" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <form method="post">
                            <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">{% trans "Tags Filter" %}</h4>
                                </div>
                                <div class="modal-body">                                    
                                    {% csrf_token %}
                                    {{ tags_filter_form|bootstrap }}                                                                
                                </div>
                                <div class="modal-footer">
                                    <a class="btn btn-default pull-left" href="{% url 'structures:index' %}" role="button">                                        
                                        {% trans "Reset Filter" %}
                                    </a>
                                    <a class="btn btn-default pull-left" href="{% url 'structures:structure_list' %}" role="button">                                        
                                        {% trans "Clear Filter" %}
                                    </a>
                                    <button type="button" class="btn btn-default" data-dismiss="modal">                                        
                                        {% trans "Cancel" %}
                                    </button>
                                    <button type="submit" class="btn btn-primary">                                        
                                        {% trans "Apply Filter" %}
                                    </button>
                                </div>                            
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Main structure table -->
                <table id="tab_structures" style="width: 100%" class="table table-striped table-compact">
                    <thead>
                        <tr>            
                            <th></th>
                            <th>{% trans "Owner" %}</th>
                            <th>{% trans "Location" %}</th>
                            <th></th>
                            <th>{% trans "Type" %}</th>
                            <th>{% trans "Name & Tags" %}</th>
                            <th>{% trans "Services" %}</th>
                            <th>{% trans "R-Hour" %}</th>
                            <th>{% trans "Fuel Expires" %}</th>
                            <th>{% trans "State" %}</th>
                        </tr>
                    </thead>
                </table>

                <p>                    
                    {% if active_tags %}
                        {% trans "Active Tags Filter" %}:&nbsp;
                        {% for tag in active_tags %}
                            {{ tag.html }}&#32;
                        {% endfor %}
                    {% endif %}
                </p>

            </div>
        </div>
    </div>
    {% if perms.structures.add_structure_owner %}
        <a class="btn btn-default navbar-btn pull-right" href="{% url 'structures:add_structure_owner' %}">            
            {% trans "Add Structure Owner" %}
        </a>
    {% endif %} 
    
    <!-- Table Legend -->
    <p class="text-muted">        
        {% trans "All dates are EVE time" %} 
        • {% trans "Offlined services are shown as" %} <del>{% trans "service" %}</del>
        • {% trans "Reinforced structures (except POCOs) are highlighted in red" %}
        • {% trans "Data can be outdated by up to 1 hour due to API caching." %}
    </p>

    <!-- share data with JS part -->
    <div 
        id="dataExport" 
        data-listDataUrl="{% url 'structures:structure_list_data' %}?tags={{ active_tags|join:',' }}"
        data-titleAlliance="{% trans 'Alliance' %}"
        data-titleCorporation="{% trans 'Corporation' %}"
        data-titleRegion="{% trans 'Region' %}"
        data-titleSolarSystem="{% trans 'Solar System' %}"        
        data-titleCategory="{% trans 'Category' %}"
        data-titleGroup="{% trans 'Group' %}"        
        data-Reinforced="{% trans 'Reinforced?' %}"
        data-State="{% trans 'State' %}"
        data-LowPower="{% trans 'Low Power?' %}"
    >
    </div>
    
{% endblock %}

{% block extra_javascript %}
    {% include 'bundles/datatables-js.html' %}    
    <script type="text/javascript" src="{% static 'js/filterDropDown/filterDropDown.min.js' %}"></script>

    <script type="text/javascript" src="{% static 'structures/structure_list.js' %}"></script>
{% endblock %}

{% block extra_css %}
    {% include 'bundles/datatables-css.html' %}
    
    <link rel="stylesheet" href="{% static 'structures/structure_list.css' %}" type="text/css" media="screen">    
{% endblock %}

{% block extra_script %}
   
{% endblock %}
