<!doctype html>
<html lang="en">
<head>
    {% block meta %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Mangetico database web interface">
    <meta name="author" content="Alexey Skobkin">
    {% endblock %}

    <title>{% block title %}Magnetico Web{% endblock %}</title>

    {% block css %}
    <!-- Bootstrap core CSS -->
    <link href="{{ asset('assets/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="{{ asset('assets/fontawesome/css/all.css') }}" rel="stylesheet">
    <!-- SIte style -->
    <link href="{{ asset('assets/magnetico-web/css/style.css') }}" rel="stylesheet">
    {% endblock %}
</head>

<body>

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="{{ path('index') }}"><i class="fas fa-magnet"></i> Magnetico Search</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
            <ul class="navbar-nav mr-auto">
                <li class="nav-item"><a class="nav-link" href="{{ path('user_account') }}"><i class="fas fa-user"></i> {{ app.user.username }}</a></li>
            </ul>

            <ul class="navbar-nav ml-auto">
                <li class="nav-item"><a class="nav-link" href="{{ logout_path('main') }}"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
            </ul>
        {% endif %}
    </div>
</nav>

<main id="content" role="main" class="container">
    {% if is_granted('ROLE_USER') %}
    <div class id="form-search">
        <form class="" action="{{ path('torrents_search') }}" method="get">
            <div class="input-group mb-3">
                <input name="query" class="form-control" type="text" placeholder="Torrent" aria-label="Search"
                       value="{% if searchQuery is defined %}{{ searchQuery }}{% endif %}"
                       {# @var app \Symfony\Bridge\Twig\AppVariable #}
                       {% if 'index' == app.request.get('_route') %}autofocus{% endif %} />
                <div class="input-group-append">
                    <button class="btn btn-outline-primary my-2 my-sm-0" type="submit"><i class="fas fa-search"></i> Search</button>
                    <button class="btn btn-outline-info" type="button" data-toggle="collapse" data-target="#search-rules" aria-expanded="false" aria-controls="search-rules">
                        <i class="fa fa-question-circle"></i>
                    </button>
                </div>
            </div>
        </form>

        <div class="alert alert-info collapse" role="alert" id="search-rules">
            {{ include('search_rules_help.html.twig') }}
        </div>
    </div>
    {% endif %}

    <div id="alerts">
        {% for type, messages in app.flashes %}
            {% for message in messages %}
                <div class="alert alert-{{ type }}" role="alert">
                    {{ message }}
                </div>
            {% endfor %}
        {% endfor %}
    </div>

    <div>
        {% block content %}{% endblock %}
    </div>
</main><!-- /.container -->

{% block javascript %}
<script src="{{ asset('assets/jquery/js/jquery-3.5.1.slim.min.js') }}"></script>
<script src="{{ asset('assets/popper/js/popper.min.js') }}"></script>
<script src="{{ asset('assets/bootstrap/js/bootstrap.min.js') }}"></script>
{% endblock %}
</body>
</html>
