{% 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 %}
<style>
html {
    scrollbar-width: none;
}
</style>
{% endblock %}

{% block content %}
    <div class="container" style="margin-top: 15px">
        <h5>Apps</h5>
        <div class="row" style="margin-left: auto; margin-right: auto;">
            {% for app in apps %}
                <div class="col-xs-4" style="width: 90px;">
                    <div class="card" onclick="goToLink('{{ app['link'] }}');" style="background-color: rgba(0,0,0,0); border: none;">
                        <div class="card-body" style="padding: .5rem; text-align: center;">
                            {% if app['image'] is defined %}
                                <img src="{{url_for('.static', filename='images/' )}}{{ app['image'] }}" class="card-img" style="width: 64px !important; padding-bottom: 5px;">
                            {% endif %}
                            <p class="card-title" style="font-size: .75rem">{{ app['name'] }}</p>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
        <h5>Games</h5>
        <div class="row" style="margin-left: auto; margin-right: auto;">
            {% for app in games %}
                <div class="col-xs-4" style="width: 90px;">
                    <div class="card" onclick="goToLink('{{ app['link'] }}');" style="background-color: rgba(0,0,0,0); border: none;">
                        <div class="card-body" style="padding: .5rem; text-align: center;">
                            {% if app['image'] is defined %}
                                <img src="{{url_for('.static', filename='images/' )}}{{ app['image'] }}" class="card-img" style="width: 64px !important; padding-bottom: 5px;">
                            {% endif %}
                            <p class="card-title" style="font-size: .75rem">{{ app['name'] }}</p>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}

{% block scripts %}
{{ super () }}
<script>
$( ".card" ).hover(
  function() {
    $(this).css('cursor', 'pointer'); 
  }, function() {
   
});

function goToLink(link) {
    window.top.location = link;
}
</script>
{% endblock %}