{% extends "comparison/base.html" %}
{% load staticfiles %}

{% block head %}
<link rel="stylesheet" href="{% static 'css/list.css' %}">
{% block head_extra %}{% endblock %}
{% endblock %}

{% block panel_title %}Kart List{% endblock %}

{% block panel_alt_title %}
<div class="dropdown pull-right">
  <button class="btn btn-default btn-xs dropdown-toggle navbar-right" type="button" id="dropdownMenu1" data-toggle="dropdown">
    <span class="glyphicon glyphicon-cog"></span> View
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="dropdown-header">Columns</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" id="table-toggle-speed">Speed</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" id="table-toggle-speed-hidden">Speed <span>(hidden)</span></a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" id="table-toggle-acceleration">Acceleration</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" id="table-toggle-weight">Weight</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" id="table-toggle-handling">Handling</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" id="table-toggle-handling-hidden">Handling <span>(hidden)</span></a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" id="table-toggle-traction">Traction</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" id="table-toggle-miniturbo">Miniturbo <span>(hidden)</span></a></li>
    <li role="presentation" class="dropdown-header">Highlights</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" id="table-toggle-highlight-hidden">Hidden stats</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" id="table-toggle-highlight-acceleration">Inefficient accelerations</a></li>
  </ul>
</div>
{% endblock %}

{% block content-header %}
<div id="content-header" class="row">
  <div class="col-xs-12 col-sm-8">
    <h5>You're viewing a saved list of kart loadouts.</h5>
    <p>Someone thought these karts were worth sharing with you. Who knows, maybe it contains your next favorite Mario Kart 8 loadout, but there's only one way to find out, and it may just involve a red shell with your name on it.</p>
    <p>This list has been viewed a total of {{ config_list.view_count }} times in the past {{ config_list.create_date|timesince }}.</p>
  </div>
  <div class="hidden-xs col-sm-4 text-center">
    <img src="{% static 'images/mk8/koopalings.png' %}" alt="The Koopalings">
  </div>
</div>
{% endblock %}

{% block content %}
<div class="table-responsive">
  <table class="table table-condensed table-hover tablesorter" data-role="table" data-mode="columntoggle" id="kart-list">
    <thead>
    <tr>
      <th class="remove hidden-xs hidden">
        <span class="unsortable"></span>
      </th>
      <th class="hidden-xs">
        <span class="unsortable">Configuration</span>
      </th>
      <th data-priority="1" data-column="speed_ground" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-html="true" data-container="body" title="Ground Speed" data-content="The top speed of the vehicle on land with normal gravity. Does not affect off-road travel.">
        <span>Speed</span>
      </th>
      <th data-priority="3" data-column="speed_water" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-html="true" data-container="body" title="Water Speed" data-content="<p>The top speed of the vehicle while driving underwater.</p><p><i><b>Note:</b> This stat is hidden in Mario Kart 8.</i></p>">
        <span>Water</span>
      </th>
      <th data-priority="3" data-column="speed_air" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-html="true" data-container="body" title="Air Speed" data-content="<p>The top speed of the vehicle while gliding.</p><p><i><b>Note:</b> This stat is hidden in Mario Kart 8.</i></p>">
        <span>Air</span>
      </th>
      <th data-priority="3" data-column="speed_antigravity" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-html="true" data-container="body" title="Antigravity Speed" data-content="<p>The top speed of the vehicle in anti-gravity mode.</p><p><i><b>Note:</b> This stat is hidden in Mario Kart 8.</i></p>">
        <span>Antigrav</span>
      </th>
      <th data-priority="1" data-column="acceleration" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-html="true" data-container="body" title="Acceleration" data-content="<p>The rate at which the vehicle reaches its top speed from a standing position.</p><p><i><b>Note:</b> Mario Kart 8 rounds acceleration values down to the nearest whole number. To maximize efficiency, avoid fractional final acceleration values.</i></p>">
        <span>Accel</span>
      </th>
      <th data-priority="1" data-column="weight" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-html="true" data-container="body" title="Weight" data-content="The weight of the vehicle. Vehicles with higher weight knock away vehicles with lower weight.">
        <span>Weight</span>
      </th>
      <th data-priority="1" data-column="handling_ground" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-html="true" data-container="body" title="Ground Handling" data-content="The turning ability of the vehicle on land with normal gravity. A higher stat means vehicles turn sharper.">
        <span>Handling</span>
      </th>
      <th data-priority="3" data-column="handling_water" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-html="true" data-container="body" title="Water Handling" data-content="<p>The turning ability of the vehicle while driving underwater.</p><p><i><b>Note:</b> This stat is hidden in Mario Kart 8.</i></p>">
        <span>Water</span>
      </th>
      <th data-priority="3" data-column="handling_air" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-html="true" data-container="body" title="Air Handling" data-content="<p>The turning ability of the vehicle while gliding.</p><p><i><b>Note:</b> This stat is hidden in Mario Kart 8.</i></p>">
        <span>Air</span>
      </th>
      <th data-priority="3" data-column="handling_antigravity" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-html="true" data-container="body" title="Antigrav Handling" data-content="<p>The turning ability of the vehicle in anti-gravity mode.</p><p><i><b>Note:</b> This stat is hidden in Mario Kart 8.</i></p>">
        <span>Antigrav</span>
      </th>
      <th data-priority="1" data-column="traction" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-html="true" data-container="body" title="Traction" data-content="The grasp of the vehicle. Vehicles with higher traction slip less on certain terrain and can stay stable on the road better. Not to be confused with handling.">
        <span>Traction</span>
      </th>
      <th data-priority="2" data-column="miniturbo" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-html="true" data-container="body" title="Miniturbo" data-content="<p>The strength of the vehicle's mini-turbo speed boosts.</p><p><i><b>Note:</b> This stat is hidden in Mario Kart 8.</i></p>">
        <span>Miniturbo</span>
      </th>
    </tr>
    </thead>

    <tbody>
    {% for config in configurations %}
    <!-- Visible: sm, md, lg -->
    <tr class="hidden-xs" data-config="{{ config.character.pk }}-{{ config.kart.pk }}-{{ config.wheel.pk }}-{{ config.glider.pk }}">
      <td class="remove hidden">
        <a href="#" class="remove-btn" data-character="{{ config.character.pk }}" data-kart="{{ config.kart.pk }}" data-wheel="{{ config.wheel.pk }}" data-glider="{{ config.glider.pk }}">
          <span class="glyphicon glyphicon-trash"></span>
        </a>
      </td>
      <td>
        <a href="#" class="add-kart" data-field="character"><img src="{{ config.character.file }}" height="32" width="32" alt="{{ config.character.name }}" class="character"></a>
        <a href="#" class="add-kart" data-field="kart"><img src="{{ config.kart.file }}" height="32" width="50" alt="{{ config.kart.name }}"></a>
        <a href="#" class="add-kart" data-field="wheel"><img src="{{ config.wheel.file }}" height="32" width="50" alt="{{ config.wheel.name }}"></a>
        <a href="#" class="add-kart" data-field="glider"><img src="{{ config.glider.file }}" height="32" width="50" alt="{{ config.glider.name }}"></a>
      </td>
      <td data-priority="1" data-column="speed_ground">{{ config.speed_ground }}</td>
      <td data-priority="3" data-column="speed_water">{{ config.speed_water }}</td>
      <td data-priority="3" data-column="speed_air">{{ config.speed_air }}</td>
      <td data-priority="3" data-column="speed_antigravity">{{ config.speed_antigravity }}</td>
      <td data-priority="1" data-column="acceleration">{{ config.acceleration }}</td>
      <td data-priority="1" data-column="weight">{{ config.weight }}</td>
      <td data-priority="1" data-column="handling_ground">{{ config.handling_ground }}</td>
      <td data-priority="3" data-column="handling_water">{{ config.handling_water }}</td>
      <td data-priority="3" data-column="handling_air">{{ config.handling_air }}</td>
      <td data-priority="3" data-column="handling_antigravity">{{ config.handling_antigravity }}</td>
      <td data-priority="1" data-column="traction">{{ config.traction }}</td>
      <td data-priority="2" data-column="miniturbo">{{ config.miniturbo }}</td>
    </tr>
    <!-- Visible: xs -->
    <tr class="hidden-sm hidden-md hidden-lg" data-config="{{ config.character.pk }}-{{ config.kart.pk }}-{{ config.wheel.pk }}-{{ config.glider.pk }}">
      <td class="remove hidden">
        <a href="#" class="remove-btn" data-character="{{ config.character.pk }}" data-kart="{{ config.kart.pk }}" data-wheel="{{ config.wheel.pk }}" data-glider="{{ config.glider.pk }}">
          <span class="glyphicon glyphicon-trash"></span>
        </a>
      </td>
      <td colspan="13">
        <a href="#" class="add-kart" data-field="character"><img src="{{ config.character.file }}" height="32" width="32" alt="{{ config.character.name }}" class="character"></a>
        <a href="#" class="add-kart" data-field="kart"><img src="{{ config.kart.file }}" height="32" width="50" alt="{{ config.kart.name }}"></a>
        <a href="#" class="add-kart" data-field="wheel"><img src="{{ config.wheel.file }}" height="32" width="50" alt="{{ config.wheel.name }}"></a>
        <a href="#" class="add-kart" data-field="glider"><img src="{{ config.glider.file }}" height="32" width="50" alt="{{ config.glider.name }}"></a>
      </td>
      <td data-priority="1" data-column="speed_ground" class="hidden-xs">{{ config.speed_ground }}</td>
      <td data-priority="3" data-column="speed_water" class="hidden-xs">{{ config.speed_water }}</td>
      <td data-priority="3" data-column="speed_air" class="hidden-xs">{{ config.speed_air }}</td>
      <td data-priority="3" data-column="speed_antigravity" class="hidden-xs">{{ config.speed_antigravity }}</td>
      <td data-priority="1" data-column="acceleration" class="hidden-xs">{{ config.acceleration }}</td>
      <td data-priority="1" data-column="weight" class="hidden-xs">{{ config.weight }}</td>
      <td data-priority="1" data-column="handling_ground" class="hidden-xs">{{ config.handling_ground }}</td>
      <td data-priority="3" data-column="handling_water" class="hidden-xs">{{ config.handling_water }}</td>
      <td data-priority="3" data-column="handling_air" class="hidden-xs">{{ config.handling_air }}</td>
      <td data-priority="3" data-column="handling_antigravity" class="hidden-xs">{{ config.handling_antigravity }}</td>
      <td data-priority="1" data-column="traction" class="hidden-xs">{{ config.traction }}</td>
      <td data-priority="2" data-column="miniturbo" class="hidden-xs">{{ config.miniturbo }}</td>
    </tr>
    <tr class="hidden-sm hidden-md hidden-lg" data-config="{{ config.character.pk }}-{{ config.kart.pk }}-{{ config.wheel.pk }}-{{ config.glider.pk }}">
      <td class="hidden-xs"></td>
      <td class="hidden-xs"></td>
      <td data-priority="1" data-column="speed_ground">{{ config.speed_ground }}</td>
      <td data-priority="3" data-column="speed_water">{{ config.speed_water }}</td>
      <td data-priority="3" data-column="speed_air">{{ config.speed_air }}</td>
      <td data-priority="3" data-column="speed_antigravity">{{ config.speed_antigravity }}</td>
      <td data-priority="1" data-column="acceleration">{{ config.acceleration }}</td>
      <td data-priority="1" data-column="weight">{{ config.weight }}</td>
      <td data-priority="1" data-column="handling_ground">{{ config.handling_ground }}</td>
      <td data-priority="3" data-column="handling_water">{{ config.handling_water }}</td>
      <td data-priority="3" data-column="handling_air">{{ config.handling_air }}</td>
      <td data-priority="3" data-column="handling_antigravity">{{ config.handling_antigravity }}</td>
      <td data-priority="1" data-column="traction">{{ config.traction }}</td>
      <td data-priority="2" data-column="miniturbo">{{ config.miniturbo }}</td>
    </tr>
    {% empty %}
    <tr><td colspan="13"><em>
      <span class="empty-alert hidden-xs">Your list is empty. Add a kart configuration by clicking the button below.</span>
      <span class="empty-alert hidden-sm hidden-md hidden-ms">Your list is empty. Add a configuration below.</span>
    </em></td></tr>
    {% endfor %}
    </tbody>

  </table>
  <form id="hidden-add" action="{% url 'add' %}" method="post">
    {% csrf_token %}
    <input type="hidden" id="hidden-character" name="add-character" value="">
    <input type="hidden" id="hidden-kart" name="add-kart" value="">
    <input type="hidden" id="hidden-wheel" name="add-wheel" value="">
    <input type="hidden" id="hidden-glider" name="add-glider" value="">
    <input type="hidden" id="hidden-panel" name="panel" value="">
  </form>
</div>
{% block add_configform %}{% endblock %}
{% endblock %}

{% block script %}
<script type="text/javascript" src="{% static 'js/tablesorter/jquery.tablesorter.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery.stickytableheaders.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery.toggle-columns.js' %}"></script>
<script>
$( document ).ready(function() {
  // ???
  // $( ".choice" ).click(function() {
  //   $( this ).toggleClass( "chosen" );
  // });

  // tablesorter
  $('table').tablesorter({
            sortInitialOrder: 'desc',
  });

  // stickyTableHeaders
  $('table').stickyTableHeaders();

  // Highlight Inefficient Accelerations
  // $('td[data-column="acceleration"]:contains(".25")').addClass('inefficient-1');
  // $('td[data-column="acceleration"]:contains(".5")').addClass('inefficient-2');
  // $('td[data-column="acceleration"]:contains(".75")').addClass('inefficient-3');

  $(function () {
    $('[data-toggle="popover"]').popover()
  })

  // Hide & Show Table Columns
  enable_toggleable_columns({{ column_prefs|safe }});

  submit_add_kart = function(character, kart, wheel, glider, panel) {
    document.getElementById("hidden-character").value = character;
    document.getElementById("hidden-kart").value = kart;
    document.getElementById("hidden-wheel").value = wheel;
    document.getElementById("hidden-glider").value = glider;
    document.getElementById("hidden-panel").value = panel;
    document.getElementById("hidden-add").submit();
  };

  $( "a.add-kart" ).click(function( event ) {
    var $parent = $( this ).parents("tr");
    var character = $parent.find("a.remove-btn").data("character");
    var kart = $parent.find("a.remove-btn").data("kart");
    var wheel = $parent.find("a.remove-btn").data("wheel");
    var glider = $parent.find("a.remove-btn").data("glider");
    var panel = $( this ).data("field");

    submit_add_kart(character, kart, wheel, glider, panel);
    event.stopPropagation();
  });

});
</script>
{% block script_extra %}{% endblock %}
{% endblock %}