{% 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>
      
<i class="fa fa-regular fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star" style="color: #ffae00;"></i>


{% if search_results is defined %}
    <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>
    
    
    <hr class="border border-primary">

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

{% endif %}




<script>
    $(".favorite").click(function() {
        favorites = JSON.parse(localStorage.getItem("favorites")) || {};
        var row = $(this).closest("tr");
        var fav = new Map();
        
        tab_url = row.find(".song").find("a").attr("href");
        if (favorites[tab_url] != undefined) {
            delete favorites[tab_url];
            row.find(".favorite").css("color", "#000000");
        } else {
            
            fav["tab_url"] = row.find(".song").find("a").attr("href");
            fav["artist_name"] = row.find(".artist").text();
            fav["tab_url"] = tab_url;
            fav["song"] = row.find(".song").text();
            fav["type"] = row.find(".type").text();
            fav["rating"] = row.find(".rating").text();

            favorites[fav["tab_url"]] = fav;
           row.find(".favorite").css("color", "#ffae00");
        }
        
        localStorage.setItem("favorites", JSON.stringify(favorites));
    });

    $(document).ready(function() {
        // make every entry yellow if we faved it before
        favorites = JSON.parse(localStorage.getItem("favorites")) || {};
        
        $("#results tr").each(function() {
            var tab_url = $(this).find(".song").find("a").attr("href");
            if (favorites[tab_url] != undefined) {
                $(this).find(".favorite").css("color", "#ffae00");
            }
        });

        //set dark mode
        dark_mode = JSON.parse(localStorage.getItem("dark_mode")) || false;
        if (dark_mode) {
            document.documentElement.setAttribute('data-bs-theme','dark')
        }
    });

    scroll_timeout = 500;
    do_scroll = true;

    function pageScroll() {
        console.log(scroll_timeout);
        window.scrollBy(0, 3);
        if (do_scroll) {
            scrolldelay = setTimeout(pageScroll, scroll_timeout);
        }
    }

    $('#checkbox_autoscroll').click(function(){
    if($(this).is(':checked')){
        do_scroll = true;
        pageScroll();
    } else {
        scroll_timeout = 500;
        do_scroll = false;
    }
});

    $('#dark_mode').click(function(){
        if (document.documentElement.getAttribute('data-bs-theme') == 'dark') {
            document.documentElement.setAttribute('data-bs-theme','light');
            localStorage.setItem("dark_mode", false);
        }
        else {
            document.documentElement.setAttribute('data-bs-theme','dark');
            localStorage.setItem("dark_mode", true);
        }
    });

</script>

{% endblock %}
