<!DOCTYPE html>
<html lang="en-GB">
<head>
    <meta charset="UTF-8">
    <title>{{ config.module.code }}{% if page.title %} - {{ page.title }}{% endif %}</title>
    <!--- CSS --->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" rel="stylesheet"
          type="text/css"/>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
          type="text/css"/>
    <link rel="stylesheet" href="css/github.css"
          type="text/css"/>
    <!--- Custom CSS -->
    <link href="{{ 'css/admonition.css' | url }}" rel="stylesheet" type="text/css"/>
    <link href="{{ 'css/body.css' | url }}" rel="stylesheet" type="text/css"/>
    <link href="{{ 'css/buttons.css' | url }}" rel="stylesheet" type="text/css"/>
    <link href="{{ 'css/header.css' | url }}" rel="stylesheet" type="text/css"/>
    <link href="{{ 'css/headings.css' | url }}" rel="stylesheet" type="text/css"/>
    <link href="{{ 'css/sidebar.css' | url }}" rel="stylesheet" type="text/css"/>
    <link href="{{ 'css/source_code.css' | url }}" rel="stylesheet" type="text/css"/>
    <link href="{{ 'css/tabs.css' | url }}" rel="stylesheet" type="text/css"/>
    <!--- JavaScript --->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js"
            integrity="sha512-+k1pnlgt4F1H8L7t3z95o3/KO+o78INEcXTbnoJQ/F2VqDVhWoaiVml/OEHv9HsVgxUaVW+IbiZPUJQfF/YxZw=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
            integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <!--- Additional Fonts --->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu+Sans:ital,wght@0,100..800;1,100..800&display=swap"
          rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Ubuntu+Sans:ital,wght@0,100..800;1,100..800&display=swap"
          rel="stylesheet">
    <!--- FavIcon --->
    <link rel="icon" type="image/png" href="images/favicon/favicon-96x96.png" sizes="96x96"/>
    <link rel="icon" type="image/svg+xml" href="images/favicon/favicon.svg"/>
    <link rel="shortcut icon" href="images/favicon/favicon.ico"/>
    <link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon.png"/>
    <link rel="manifest" href="images/favicon/site.webmanifest"/>
</head>
<body>
<div class="container-fluid d-flex flex-column p-3 vh-100">
    {% include('header.html') %}
    <div class="d-flex flex-row gap-3 flex-grow-1 overflow-hidden">
        <div class="bg-body-tertiary d-flex flex-column p-3 rounded-4 shadow h-100"
             style="width: 15vw; min-width: 15vw; max-width: 15vw; flex-shrink: 0;">
            <div class="overflow-y-auto">
                {% include('sidebar.html') %}
            </div>
        </div>
        <div class="flex-grow-1 position-relative bg-body-tertiary d-flex flex-column p-3 rounded-4 shadow">
            <div class="overflow-y-auto">
                {{ page.content }}
            </div>
        </div>
        <div class="bg-body-tertiary d-flex flex-column p-3 rounded-4 shadow h-100"
             style="width: 15vw; min-width: 15vw; max-width: 15vw; flex-shrink: 0; overflow-y: auto;">
            {% include('contents_page.html') %}
        </div>
    </div>
</div>
</body>
<script>
    hljs.configure({
        languages: ['python', 'shell', 'c++', 'cpp']
    })
    hljs.highlightAll()
    mermaid.initialize()
</script>
</html>