<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cadastro de Rostos</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-5">
        <h1>Cadastro de Rostos</h1>
        <form method="post" action="{{ url_for('cadastrar') }}">
            <div class="row">
                {% for image in images %}
                    <div class="col-md-3">
                        <div class="card mb-4">
                            <img src="{{ url_for('serve_image', filename=image) }}" class="card-img-top">
                            <div class="card-body">
                                <input type="checkbox" name="selected_images" value="{{ image }}">
                                <label>{{ image }}</label>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
            <button type="submit" class="btn btn-primary">Cadastrar Selecionados</button>
        </form>

        {% with messages = get_flashed_messages(with_categories=true) %}
          {% if messages %}
            <div class="mt-3">
              {% for category, message in messages %}
                <div class="alert alert-{{ category }}">{{ message }}</div>
              {% endfor %}
            </div>
          {% endif %}
        {% endwith %}
    </div>
</body>
</html>
