<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>LittlePrynter</title>
        <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
        <link rel="stylesheet" href="{{ url_for('static',filename='css/style.css') }}">
    </head>
    <body class="container">
        <div class="col-auto">
          <a href="/"><img class="rounded" width="100px" src="{{ url_for('static', filename='images/little-printer.png') }}" alt="LittlePrynter icon"></a><h1 class="card-title font-weight-bold">Little Prynter</h1>
          <hr>
          <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="/">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/webcam">Webcam</a>
                  </li>
                </ul>
              </div>
          </nav>

          <br>

        <div class="alert alert-dark" role="alert">LittlePrynter is under heavy developpement, you may encounter bugs ! If so, try again. Thanks !</div>
        <br>
        {% with messages = get_flashed_messages(category_filter=('error')) %}
          {% if messages %}
            {% for message in messages %}
              <div class="alert alert-danger" role="alert">⚠️ {{ message }}</div>
            {% endfor %}
          {% endif %}
        {% endwith %}

        {% with messages = get_flashed_messages(category_filter=('info')) %}
          {% if messages %}
            {% for message in messages %}
              <div class="alert alert-info" role="alert">ℹ️ {{ message }}</div>
            {% endfor %}
          {% endif %}
        {% endwith %}


        {% block content %}


        {% endblock %}
        <hr>

        <footer class="row">
        <p class=" text-center">Little Prynter is built by <a href="https://n07070.xyz/about-me/">n07070</a> because it's fun :) | <a href="https://git.n07070.xyz/n07070/littleprynter">Source code - AGPLv3</a></p>
        </footer>
    </body>
            <script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>

</html>
