<html>
    <%- include("./partials/header.ejs") %>
    <body>
        <%- include("./partials/navbar.ejs") %>
        <div class="container-fluid">
            <div class="row">
            <div class="col-md-5 d-flex" style="align-items: center;">
                <img src="/<%= faction.image %>" class="img-fluid" alt="Faction Image">
            </div>
            <div class="col-md-7 pe-4">
                <h1 class="text-center" style="font-family: 'Sofia Sans';"><%= faction.name %></h1>
                <div class="d-flex" style="justify-content: space-between;">
                    <h3 style="font-family: Arvo;">Type: <%= faction.typefaction  %></h3> <% if(faction.discord){%><a style="font-family: Arvo;" class="nav-link" href="https://discord.gg/<%= faction.discord %>" target="_blank"><img src="/discord.svg" width="22" height="22"></a><% } %>
                </div>
                <p style="font-family: Arvo;"><%= faction.description %></p>
            </div>
            </div>
            <div class="row">
            <div class="col-md-12">
                <h2 style="font-family: 'Red hat display';">Membres de la faction</h2>
                <ul class="list-group">
                <% faction.members.forEach(membre => { %>
                    <% if(membre != 'null'){ %>
                <li style="font-family: Arvo;" class="list-group-item"><%= membre %></li>
                <%}%>
                <% }) %>
                </ul>
            </div>
            </div>
        </div>
    </body>    
</html>