{% extends "base/plain" %}
{% block head %}
<link rel='stylesheet' href='{{ url('/static/highlight/default.css') }}' />
<script src='{{ url('/static/highlight.pack.js') }}'></script>
<script src='{{ url('/static/highlightjs-line-numbers.min.js') }}'></script>
<script src='{{ url('/static/compressor.min.js') }}'></script>
<script>
    hljs.initHighlightingOnLoad();
    hljs.initLineNumbersOnLoad();
    console.log(hljs)
</script>
<style>
/* for block of numbers */
.hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    text-align: center;
    color: #ccc;
    border-right: 1px solid #CCC;
    vertical-align: top;
    padding-right: 5px;

    /* your custom style here */
}

/* for block of code */
.hljs-ln-code {
    padding-left: 10px;
}

.image-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
.image-list.small {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}

.image-list .image {
    width: 120px;
    height: 120px;
    background: #0001;
    padding: 8px;
    border: 1px solid #0002;
    border-radius: 4px;
    margin-left: auto;
    margin-right: auto;
}

.image-list.small .image {
    width: 80px;
    height: 80px;
    background: #0001;
    padding: 8px;
    border: 1px solid #0002;
    border-radius: 4px;
}

.image-list .image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
</style>
{% endblock %}
{% block body %}
{% include "components/board_form.html" %}
<nav class='navbar shadow bg-dark'>
    <div class='container-fluid'>
        <a href='{{ url('/') }}' class='navbar-brand'>Kyokusui</a>
    </div>
</nav>
<div class='container-fluid' style='height:calc(100vh - 56px)'>
    <div class='row'>
        <nav class='sidebar col-md-3 col-lg-2 mt-4'>
            {% if permission('create_board', request.user) %}
            <button class='btn btn-primary' data-bs-toggle='modal' data-bs-target='#board_form'>板を立てる</button>
            {% endif %}
            <nav class='nav nav-pills flex-column mt-3'>
                {% for board_ in boards %}
                <div class='nav-link d-flex justify-content-between'>
                    <a href='{{ url('/' + board_._id) }}'>{{ board_.name }}</a>
                    <a data-bs-toggle='collapse' href='#nav-{{ board_._id }}'>
                        <i class="bi bi-caret-down-fill"></i>
                    </a>
                </div>
                <nav class='{% if board != board_ %}collapse{% endif %} nav nav-pills flex-column' id='nav-{{ board_._id }}'>
                    {% for thread_ in board_.threads|selectattr('closed', 'false') %}
                    <a class='{% if thread == thread_ %}active{% endif %} nav-link ms-3 my-1' href='{{ url('/' + board_._id + '/' + thread_._id) }}'>{{ thread_.title }}</a>
                    {% endfor %}
                </nav>
                {% endfor %}
            </nav>
        </nav>
        <main class='main col-md-9 col-lg-10 pt-4 ps-0 pe-0'>
            {% block main %}
            {% endblock %}
        </main>
    </div>
</div>
{% endblock %}