<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}LabRat Setup{% endblock %}</title>
    <link href="{{ url_for('static', filename='styles/css/main.css') }}" rel="stylesheet" />
    <style>
.flash.success { color: green; }
.flash.danger { color: red; }
.flash.warning { color: orange; }
</style>
</head>

<body>

    <!-- Flash Messages Container -->
    <div class="flash-container">
      {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
          <ul class="flashes">
          {% for category, message in messages %}
            <li class="{{ category }}">{{ message }}</li>
          {% endfor %}
          </ul>
        {% endif %}
      {% endwith %}
    </div>

    <!-- Main Content Block -->
    {% block content %}{% endblock %}

    <!-- Scripts Block -->
    {% block scripts %}
    <script>
        // Function to remove flash messages after a few seconds
        setTimeout(function() {
            var flashes = document.querySelector('.flashes');
            if (flashes) {
                flashes.style.display = 'none';
            }
        }, 3000); // 3000 milliseconds = 3 seconds
    </script>
    {% endblock %}
</body>

</html>