{% extends 'base.html.twig' %}

{% block title %}Sermon Notes{% endblock %}

{% block stylesheets %}
<link href="{{ asset('css/main.css') }}" rel="stylesheet" />
<link href='{{ asset('styles/style.css') }}' rel='stylesheet' />
<link href='{{ asset('css/jquery-ui.theme.css') }}' rel='stylesheet' />
<link href='{{ asset('css/jquery-ui.structure.css') }}' rel='stylesheet' />
{% endblock %}

{% block javascripts %}
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/browser.min.js') }}"></script>
<script src="{{ asset('js/breakpoints.min.js') }}"></script>
<script src="{{ asset('js/util.js') }}"></script>
<script src="{{ asset('js/main.js') }}"></script>

<!-- <script src="https://kit.fontawesome.com/f15a79324f.js" crossorigin="anonymous"></script> -->
{% endblock %}

{% block body %}
<div id='wrapper'>
    <div id='main'>
        <div class='inner'>
            <header id="header">
                <a href='/{% if app.user %}home{% endif %}' class='logo'>
                    <img src='{{ asset('images/vecteezy_notes-icon-in-trendy-flat-style-isolated-on-white_29722382.jpg') }}' style='width:60px;'/>
                </a>
            </header>

            <!-- Banner -->
            <section id="banner">
                <div class="content">
                    <header>
                        <h1>Sermon Notes</h1>
                        <p>A free note taking app for sermons</p>
                    </header>
                </div>
                <span class="image object">
                    <img src="{{ asset('images/lined-paper-template-01.png') }}" alt="" />
                </span>
            </section>
        </div>
    </div>

    {% include('default/sidebar.html.twig') %}

</div>
{% endblock %}