templates/dynastyTemplate.html

<html>
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
        <title>{%if parent is defined%}House{%endif%} {{name}}</title>
    </head>
    <body>
        <header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-body border-bottom shadow-sm">
            <p class="h1 my-0 me-md-auto fw-normal">{%if parent is defined and parent != dynasty %}House{%endif%} {{name}}</p>
            <a class="btn btn-outline-primary btn-sm" href="../index.html">Home</a>
        </header>
        <main class="m-2">
            <div class="row text-start">
                <div class="col w-50">
                    {%if found_date != "" and found_date != none%}
                    Creation Date: {{found_date}}
                    <br />
                    {%endif%}
                    {%if motto is defined%}
                    Motto: "{{motto}}"
                    <br />
                    {%endif%}
                    {%if parent is defined and parent.id != id%}
                    Parent Dynasty: {{parent|render_ref}}
                    <br />
                    {%endif%}
                    {%if members is defined%}
                    Total Members: {{members}}
                    {%else%}
                    Number of houses: {{houses}}
                    {%endif%}
                    <br>
                    Total accumulated renown: {{prestige_tot}}<br>
                    Current renown: {{prestige}}<br>
                    {%if perks is defined%}
                    Dynasty Legacies:
                    <table class="table table-bordered w-auto">
                    {%for key, value in perks%}
                    <tr>
                        <td>{{key}}</td>
                        {%for i in range(value)%}
                        <td class= "bg-success" style="width:20px"></td>
                        {%endfor%}
                        {%for i in range(5 - value)%}
                        <td style="width:20px"></td>
                        {%endfor%}
                    </tr>
                    {%endfor%}
                    </table>
                    {%endif%}
                    {%if not no_vis%}
                    <div class="card">
                        <div class="card-header">
                        Family tree:
                        </div>
                        <div class="card-body overflow-auto p-0">
                            <a href="./{{id}}.svg" target="_blank"><img src="./{{id}}.svg" alt="Family tree"></a>
                        </div>
                    </div>
                    {%endif%}
                </div>
                <div class="col w-50">
                    {%if leaders|length > 0%}
                    <div class="card">
                        <div class="card-header">
                            House head history:
                        </div>
                        <ol class="list-group list-group-numbered list-group-flush">
                            {%for leader in leaders%}
                            <li class="list-group-item">{{leader|render_ref}}</li>
                            {%endfor%}
                        </ol>
                    </div>
                    {%endif%}
                </div>
            </div>
        </main>
    </body>
    <script>
        document.querySelector("html").setAttribute("data-bs-theme", window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
    </script>
</html>