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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
        integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
        crossorigin="anonymous" />
    <link rel="stylesheet" href="/css/main.css">

    <title>Serveur de notifications HelloAsso</title>

    <style>
        body {
            height: 100vh;
            background: linear-gradient(120deg, #69ff97, #00e4ff);
            background-position: var(--step-background-position);
        }

        .accordion-body {
            background-color: lightgrey;
        }
    </style>
</head>

<body>
    <div class="container p-5 bg-white rounded shadow-sm">
        <h1>Console d'administration des notifications HelloAsso</h1>

        <p>
            Vous trouverez ici les diff√©rentes notifications re√ßues sur votre serveur.<br />
            La date de r√©ception et le type de notification sont affich√©s par d√©faut, pour voir le contenu de la
            notification cliquez sur <i class="fas fa-chevron-down"></i>.
        </p>

        <div class="accordion" id="accordion">
            <% results.map((result, idx)=>{ %>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="heading<%= idx %>">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapse<%= idx %>" aria-expanded="false"
                            aria-controls="collapse<%= idx %>">
                            üóìÔ∏è <%= result.date + ' ' + (result.type=="Order" ? "üõí " : (result.type=="Payment" ? "üí∂ "
                                : "üóíÔ∏è " )) + result.type %>
                        </button>
                    </h2>
                    <div id="collapse<%= idx %>" class="accordion-collapse collapse" aria-labelledby="heading<%= idx %>"
                        data-bs-parent="#accordion">
                        <div class="accordion-body">
                            <pre><%= '' + result.data %></pre>
                        </div>
                    </div>
                </div>
                <% }) %>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
            crossorigin="anonymous"></script>
</body>

</html>