{% extends "comparison/list.html" %}
{% load staticfiles %}
{% load humanize %}

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

{% block panel_title %}My Karts{% endblock %}

{% block nav_home_active %}active{% endblock %}

{% block content-header %}
<div id="content-header" class="row">
  <div class="col-xs-12 col-sm-8">
    <h5>Add one or more Mario Kart 8 loadouts to compare stats.</h5>
    <p>No more scrolling back and forth between kart components using in-game menus! Now you can plan the best possible loadout for your driving style by comparing any of the {{ total_combinations|intcomma }} possible kart loadouts in a user-friendly layout.</p>
  </div>
  <div class="hidden-xs col-sm-4 text-center">
    <img src="{% static 'images/mk8/koopalings.png' %}" alt="Hold on to your hats.">
  </div>
</div>
{% endblock %}

{% block add_configform %}
<div class="text-right">
  <a class="btn btn-default" href="/save/">Share <span class="glyphicon glyphicon-share"></span></a>
  <div class="btn-group">
    <button class="btn btn-default edit-btn">Edit <span class="glyphicon glyphicon-trash"></span></button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li id="reset-btn"><a href="#">Remove all karts</a></li>
    </ul>
  </div>
  <!--<button id="reset-btn" class="btn btn-default">Delete <span class="glyphicon glyphicon-trash"></span></button>
  <button id="reset-btn" class="btn btn-default">Reset <span class="glyphicon glyphicon-trash"></span></button>-->
  <a class="btn btn-danger" href="/add/">Add Kart <span class="glyphicon glyphicon-plus"></span></a>
</div>
{% endblock %}

{% block script_extra %}
<script>
$( document ).ready(function() {
  // Add Kart form
  $( "label.fb-character" ).click(function() {
    $( "#character-next" ).removeClass( "disabled").addClass( "btn-danger" );
  });
  $( "label.fb-kart" ).click(function() {
    $( "#kart-next" ).removeClass( "disabled").addClass( "btn-danger" );
  });
  $( "label.fb-wheel" ).click(function() {
    $( "#wheel-next" ).removeClass( "disabled").addClass( "btn-danger" );
  });
  $( "label.fb-glider" ).click(function() {
    $( "#glider-next" ).removeClass( "disabled").addClass( "btn-danger" );
  });

  // Add Kart form
  $( "label.fb-character" ).click(function() {
    $( "#character-next" ).removeClass( "disabled").addClass( "btn-danger" );
  });
  $( "label.fb-kart" ).click(function() {
    $( "#kart-next" ).removeClass( "disabled").addClass( "btn-danger" );
  });
  $( "label.fb-wheel" ).click(function() {
    $( "#wheel-next" ).removeClass( "disabled").addClass( "btn-danger" );
  });
  $( "label.fb-glider" ).click(function() {
    $( "#glider-next" ).removeClass( "disabled").addClass( "btn-danger" );
  });

  // confirm kart configuration list reset
  $( "#reset-btn" ).click(function() {
    if (confirm('Are you sure you want to clear all your kart configurations?')) {
      window.location = "{% url 'reset' %}";
    }
    return false;
  });

  // toggle edit column when button is licked
  $( ".edit-btn" ).click(function() {
    $( ".remove" ).toggleClass( "hidden" );
    $( "button.edit-btn" ).toggleClass( "btn-default btn-primary" );
    $( "button.edit-btn + button" ).toggleClass( "btn-default btn-primary" );
    return false;
  });

  // handle removal for a row
  $( ".remove-btn" ).click(function() {
    if (confirm('Are you sure you want to remove this kart configuration?')) {
      var character = $( this ).data("character");
      var kart = $( this ).data("kart");
      var wheel = $( this ).data("wheel");
      var glider = $( this ).data("glider");
      remove_kart(character, kart, wheel, glider);
    }
    return false;
  });

  {% if configurations %}
  $( "#share_link" ).removeClass("disabled");
  $('#share_link > a').unbind('click');
  {% endif %}
});
</script>
{% endblock %}