<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>{% block title %}{% endblock %} | URL shortener</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
    <style>
        body {padding-top: 60px;}
        .app {display: flex; min-height: 100vh; flex-direction: column;}
        .app-content {flex: 1;}
        .app-footer p {margin-bottom: 20px;}
    </style>
    {% block stylesheets %}{% endblock %}
</head>
<body class="app">
    <div class="app-content">
        <main class="container">
            {% block content %}{% endblock %}
        </main>
    </div>

    <footer class="app-footer">
        <div class="container">
            <hr />
            {% block footer %}
                <p>
                    &copy; {{ "now" | date("Y") }} <a href="https://shlink.io">Shlink</a>
                </p>
            {% endblock %}
        </div>
    </footer>

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    {% block javascript %}{% endblock %}
</body>
</html>
