<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Alica - Offres</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        .offre-container {
            margin-bottom: 5%;
        }
        .offre-img {
            max-width: 100%;
        }

        #titrePrincipal {
            padding-bottom: 10px;
            border-bottom: 1px solid black;
            margin-bottom: 30px;
        }

        .custom-button {
            background-color: #00DBFF;
            border-color: #00DBFF;
            color: #fff;
        }

    </style>
</head>
<body>
<header>
    {% include "menu.html" %}
</header>

<div class="container mt-4">
    <h1 id="titrePrincipal">Offres d'emploi</h1>

    {% for offre in offers %}
    <div class="offre-container">
        <div class="row">
            <!-- Première ligne -->
            <div class="col-12 col-md-3">
                <img src="data:image/png;base64,{{ offre.getImg().getBlob() | base64 }}" class="offre-img">
            </div>

            <div class="col-12 col-md-9">
                <h3>{{ offre.getNom() }}</h3>
                <p>Julien Martin</p><!-- A changer -->
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <p class="text-left">{{ offre.getDescription() }}</p>
            </div>
        </div>

        <!-- Quatrième ligne (Localisation) -->
        <div class="row">
            <div class="col-1">
                <img src="assets/location.png" class="img-fluid" title="ville">
            </div>
            <div class="col-11">
                <p>{{ offre.getVille() }}</p>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <button type="button" class="btn btn-outline-primary btn-sm mb-2 custom-button"
                        onclick="window.location.href = 'index.php?action=displayOffer&id={{offre.getId()}}';">En savoir plus ></button>
            </div>
        </div>
    </div>
    {% endfor %}

    {% if pages is defined %}

    {% for page in pages %}
        <a href="index.php?action=displayOffers&page={{page}}">{{page}}</a>
    {% endfor %}

    {% endif %}

</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>