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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

</head>

<body>
    <div class="container">
        <header class="d-flex justify-content-center py-3">
            <ul class="nav nav-pills">
                <li class="nav-item"><a href="./../" class="nav-link" aria-current="page">Home</a></li>
                <li class="nav-item"><a href="./../black&white" class="nav-link" aria-current="page">B&W</a></li>
                <li class="nav-item"><a href="./../gray" class="nav-link">Gray</a></li>
                <li class="nav-item"><a href="./" class="nav-link">Resize</a></li>
                <li class="nav-item"><a href="./../align_v" class="nav-link">Align_V</a></li>
                <li class="nav-item"><a href="./../align_h" class="nav-link">Align_H</a></li>
                <li class="nav-item"><a href="./../fusion" class="nav-link">Fusion</a></li>
                <li class="nav-item"><a href="./../animation" class="nav-link">Animation</a></li>
              </ul>
        </header>
    </div>

    <div class="container text-center">
        <h1 class="mb-5">
            Your are in page resize
        </h1>

        {% if message_erreur %}
            <div class="text-white bg-danger text-center fs-4 p-3 mb-4">
                {{ message_erreur }}
            </div>
        {% endif %}

        <div class="d-flex justify-content-center mb-5">
            <form class="border boder-1 border-black p-3 w-50" action="" method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="form-group mb-3">
                    <label class="mb-2" for="image">Choississez une image</label>
                    <input type="file" id="image" name="image" accept="image/*">
                </div>
                <div class="form-group">
                    <label class="mb-2" for="hauteur">Choississez une nouvelle hauteur</label>
                    <input type="text" id="hauteur" name="hauteur" accept="image/*">
                </div>
                <div class="form-group">
                    <label class="mb-2" for="largeur">Choississez une nouvelle largeur</label>
                    <input type="text" id="largeur" name="largeur" accept="image/*">
                </div>
                <input type="submit" class="btn btn-primary mt-3" value="Telecharger">
            </form>
        </div>

        {% if image_classique %}
            <div class="w-full">
                <img class="w-100 mb-5" src="../../media/image_classique.png">
                <img class="w-full" src="../../media/image_resize.png">
            </div>
        {% endif %}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
        crossorigin="anonymous"></script>
</body>

</html>