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

{% block styles %}
{{super()}}
<link rel="stylesheet" href="{{url_for('.static', filename='style.css')}}">
{% endblock %}

{% block navbar %}
<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
    <div class="navbar-brand">Technical Incompetence</div>
    <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>
</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 %}
    <p>It turns out dCloud's amazingness is just too great for this lame internet - we need a new one to maximize our full potential. Welcome to the Technical Incompetence internet. Population - US.</p>
        <div class="row">
            {% for app in apps %}
                {% include "card.j2" %}
            {% endfor %}
        </div>
    </div>
{% endblock %}

{% block scripts %}
{{ super () }}
<script>
$("#search-box").keyup(function(event) {
    if (event.keyCode === 13) {
        window.location = '{{ search['search_url'] }}' + $('#search-box').val();
    }
});

$( ".card" ).hover(
  function() {
    $(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;
}
</script>
{% endblock %}