<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Fortune Queries{% endblock %}</title>
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
        {# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
        {% block stylesheets %}
            {{ encore_entry_link_tags('app') }}
        {% endblock %}

        {% block javascripts %}
            {{ encore_entry_script_tags('app') }}
        {% endblock %}
    </head>
    <body class="flex flex-col min-h-screen">
        <nav class="border-gray-200 px-4 py-5 bg-gray-900">
            <div class="container flex flex-wrap items-center justify-between mx-auto">
                <a href="{{ path('app_homepage') }}" class="flex items-center">
                    <img src={{ asset('build/images/fortune-logo.png') }} class="h-9 mr-3" alt="Fortune Queries Logo"/>
                    <span class="self-center text-xl font-semibold whitespace-nowrap text-white">Fortune Queries</span>
                </a>
                <div class="flex">
                    <div class="relative">
                        <form action="{{ path('app_homepage') }}">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                <svg class="w-5 h-5 text-gray-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
                                <span class="sr-only">Search icon</span>
                            </div>
                            <input type="text" id="search-navbar" name="q" value="{{ app.request.query.get('q') }}" placeholder="Search..." class="block w-full p-2 pl-10 text-sm border rounded-lg bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500">
                        </form>
                    </div>
                </div>
            </div>
        </nav>
        {% block body %}{% endblock %}
        <footer class="mt-auto bg-slate-100">
            <div class="p-5 flex justify-between">
                <p>Brought to you with <i class="fas fa-heart text-red-600"></i> from <a class="underline hover:text-blue-600" href="https://symfonycasts.com/">SymfonyCasts</a></p>
                <div class="text-lg">
                    <a class="text-gray-700 hover:text-gray-900" href="https://twitter.com/SymfonyCasts"><i class="fa-brands fa-twitter"></i></a>
                    <a class="text-gray-700 hover:text-gray-900" href="https://www.facebook.com/SymfonyCasts"><i class="fa-brands fa-facebook"></i></a>
                    <a class="text-gray-700 hover:text-gray-900" href="https://github.com/SymfonyCasts"><i class="fa-brands fa-github"></i></a>
                </div>
            </div>
        </footer>
    </body>
</html>
