{% extends "bootstrap/base.html" %}
{% block title %}Technical Incompetence - Home{% endblock %}

{% block styles %}
{{super()}}
<link rel="icon" type="image/png" href="{{url_for('.static', filename='favicon.png')}}" />
<link rel="stylesheet" href="{{url_for('.static', filename='style.css')}}">
{% if countdown is defined %}
    <link rel="stylesheet" href="{{url_for('.static', filename='clock.css')}}">
{% endif %}
{% endblock %}

{% block navbar %}
<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
    <div class="navbar-brand">Technical Incompetence</div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
            aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="/">Home</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">Games <span class="sr-only">(current)</span></a>
            </li>
        </ul>
        <form class="form-inline ml-auto">
            {% if account_url is defined and account_url != '' %}
                <a class="btn btn-primary" href="{{ account_url }}" role="button">My Account</a>
            {% endif %}
        </form>
    </div>
</nav>
{% endblock %}

{% block content %}
    <div class="container" style="margin-top: 15px">
    {% if search['active'] == True %}
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
            <input type="text" class="form-control" id="search-box" placeholder="Search">
        </div>
        <br><br>
    {% endif %}
    {% if countdown is defined %}
        {% include "countdown.j2" %}
    {% endif %}
    <p>{{ description }}</p>
        <div class="row">
            {% for app in apps %}
                {% include "card.j2" %}
            {% endfor %}
        </div>
        <div class="row">
            {% include "card_list.j2" %}
        </div>
        <br>
    </div>
    {% include "new_game_modal.j2" %}
{% endblock %}

{% block scripts %}
{{ super () }}
{% if countdown is defined %}
    <script>
        const deadline = '{{ countdown['timestamp'] }}';
        const tripName = '{{ countdown['name'] }}';
    </script>
    <script src="{{url_for('.static', filename='clock.js')}}"></script>
{% endif %}
<script>
$("#search-box").keyup(function(event) {
    if (event.keyCode === 13) {
        window.location = '{{ search['search_url'] }}' + $('#search-box').val();
    }
});

$( ".card" ).hover(
  function() {
   if (!$(this).attr('id')) {
    $(this).addClass('shadow-lg').css('cursor', 'pointer'); 
    $(this).addClass('card-hover');
   }
  }, function() {
    $(this).removeClass('shadow-lg');
    $(this).removeClass('card-hover');
});

function goToLink(link) {
    window.location = link;
}

function addGame() {
    game_title = $('#game-title').val();
    game_link = $('#game-link').val();

    if (game_title.trim().length === 0) {
        showError('Title is required');
        return false;
    }

    if (game_link.trim().length === 0) {
        showError('Link is required');
        return false;
    }

    $.ajax({
        url: '/add',
        method: 'POST',
        data: { "game_title": game_title,
                "game_link": game_link },
        success: function(data) {
            if (data !== 'Error') {
                $('#game-title').val('');
                $('#game-link').val('');
                window.location.reload();
            } else {
                showError('Something went wrong!');
            }
        }
    });
}

function deleteGame(game_id) {
    $.ajax({
        url: '/delete',
        method: 'POST',
        data: { "game_id": game_id },
        success: function(data) {
            if (data !== 'Error') {
                window.location.reload();
            } else {
                showError('Something went wrong!');
            }
        }
    });
}

function showError(error) {
    hideSuccess();
    $('#error-alert').text(error);
    $('#error-alert').show();
}

function hideError(error) {
    $('#error-alert').hide();
}
</script>
{% endblock %}