{% extends "base.html" %}


{% block content %}

<form class="row" method="GET" action="/search">
  <div class="col-md-9">
    <label for="search_term" class="visually-hidden">Search</label>
    <input name="search_term" type="text" class="form-control" id="search_term" value="{{ search_term or '' }}" placeholder="Search">
  </div>
  
<div class="col-md-2">
    <button type="submit" class="btn btn-primary">Search</button>
    <button type="button" class="btn btn-primary" onclick="$('#search_term').val('')" >Clear</button>
</div>
</form>
      
{% if search_results is defined or favs is defined and favs %}
    <table id="results" class="table">
      <thead>
        <tr>
          <th scope="col">artist</th>
          <th scope="col">song</th>
          <th scope="col">rating</th>
          <th scope="col">type</th>
          <th scope="col">favorite</th>
        </tr>
      </thead>
      <tbody>
    {% for result in search_results %}

        <tr>
          <td class="artist" ><a href="{{ result.artist_url}}">{{ result.artist_name}}<a/></td>
          <td class="song" ><a href="{{ result.tab_url}}">{{ result.song_name}} (ver {{result.version}})<a/></td>
          <td class="rating">{{ result.rating}}/5 ({{result.votes}})</td>
          <td class="type" >{{ result._type}}</td>
          <td><i class="fa fa--regular fa-star favorite"></i></td>
        </tr>

    {% endfor %}
      </tbody>
    </table>
{% endif %}

{% if tab is defined %}
    <a href="{{ tab.tab_url }}">View on Ultimate Guitar</a><br>
    {{ tab.artist_name }} - {{ tab.song_name }} (ver {{tab.version }})<br>
    {% if tab.tuning %}
        Tuning: {{ tab.tuning }}<br>
    {% endif %}
    Difficulty: {{ tab.difficulty }}<br>
    Capo: 
    {% if tab.capo %}
        {{ tab.capo -}} th fret
    {% else %}
        no capo
    {% endif %}
    </br>
    
    
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="checkbox_autoscroll" />
      <label class="form-check-label" for="checkbox_autoscroll">Autoscroll</label>
    </div>
    <button type="button" class="btn btn-primary" onclick="scroll_timeout-=50" >+</button>
    <button type="button" class="btn btn-primary" onclick="scroll_timeout+=50" >-</button>
    <i id="dark_mode" class="fa fa-adjust fa-fw"></i>
    <i class="fa fa--regular fa-star favorite"></i>
    
    
    <hr class="border border-primary">

    <div style="font-family: monospace">
        {{ tab.tab | safe }} 
    </div>


    <h2>Alternative versions</h2>
    {% for version in tab.versions %}
    <a href="{{ version.tab_url }}">Version {{ version.version }} ({{ version._type }}) {{version.rating }}/5 ({{ version.votes }})</a></br>
    {% endfor %}


{% endif %}


{% if favs is defined and favs %}

<script>
    $(document).ready(function() {
        favorites = JSON.parse(localStorage.getItem("favorites")) || {};

        $.each(favorites, function(index, song) {
            $('#results').append(
                '<tr>' +
                    '<td>' + song.artist_name + '</td>' +
                    '<td class="song">' +
                        '<a href="' + song.tab_url + '">' + song.song + '</a>' +
                    '</td>' +
                    '<td>' + song.rating + '</td>' +
                    '<td>' + song.type + '</td>' +
                    '<td><i class="fa fa--regular fa-star favorite"></i></td>' + 
                '</tr>');
        });

        colorize_favs();
    });


</script>

{% endif %}

{% if tab is defined and tab %}

<script>
    $(document).ready(function() {

        favorites = JSON.parse(localStorage.getItem("favorites")) || {};
        if(window.location.pathname in favorites) {
            console.log("True!");
            $(".favorite").css("color", "#ffae00");
        }

    });

    $(".favorite").click(function() {
        console.log("fav2 was clicked");
        favorites = JSON.parse(localStorage.getItem("favorites")) || {};

        tab_url = window.location.pathname;
        if (tab_url in favorites) {
            delete favorites[tab_url];
            $(".favorite").css("color", "#000000");
        } else {
            var fav = new Map();
            fav["artist_name"] = "{{ tab.artist_name }}";
            fav["tab_url"] = window.location.pathname;
            fav["song"] = "{{ tab.song_name }}";
            fav["type"] = "{{ tab._type }}";
            fav["rating"] = "{{ tab.rating }}";

            favorites[fav["tab_url"]] = fav;
            $(".favorite").css("color", "#ffae00");
        }

        localStorage.setItem("favorites", JSON.stringify(favorites));
    });

</script>

{% endif %}

{% endblock %}
