{% extends 'pages/head.j2' %}
{% block style %}
<style>
{% block css_body %}
body {
    background-color: rgba(21, 20, 20, 0.98);
    box-shadow: inset 0px 0px 5px 1px #000000b8;
    height: 100%;
    padding: 1em;
    margin: 0px;
    text-align: revert;
    display: grid;
}
{% endblock css_body %}

{% block css_top %}
.top {
    display: grid;
    grid-template: [link-0] "link-0 link-2 link-4" 30px [link-4-end] / 33% 33% 33%;
    justify-content: center;
    justify-items: center;
}
{% endblock css_top %}

{% block extras %}
.browse {
    display: grid;
    width: 50%;
}

.mob {
    display: grid;
    grid-template: [link-0-start] "link-0 link-1 link-2 link-3 link-4" [link-4-end] / 19% 19% 19% 19% 19%;
    justify-content: center;
}

.link {
    text-decoration: none;
    color: #ac875f;
}

.top > a.link {
    display: grid;
}

.link:hover {
    color: #f4d0a1;
}

.top .link-0 {
    display: grid;
    grid-area: link-0;
}

.top .link-4 {
    grid-area: link-4;
    display: grid;
}

.link .prev-link {
    display: inline-flex;
    grid-column: 1;
}

.link .next-link {
    grid-area: next-link;
    grid-column: 7;
    display: inline-flex;
}

.link .current-link {
    grid-area: current-link;
    display: inline-flex;
    grid-column: 6;
}


.link-2 a {
    text-decoration: none;
}

.link-2 {
    grid-template: [prev-link-start] "prev-link current-link next-link" [next-link-end] / 10% 10% 10% 10% 10% 15% 10% 10% 10% 10% 10%;
    display: grid;
    grid-area: link-2;
    width: 20em;
    justify-content: center;
}

.mob-container {
    display: grid;
}

.mob-header {

}

.mob-title {
    justify-self: center;
}


.mob-title-no-data {
    color: #C1857F;
}

.stance-buttons {
    display: flow-root;
    justify-content: center;
    justify-self: center;
    margin: 5px 0em 1em;
    width: revert;
    background-color: #134202;
}

.stance-buttons {
    margin: 5px 0em 1em;
    display: inline-block;
    justify-self: center;
    text-align: center;
}

.stance {
    text-decoration: none;
    grid-row: 1;
    color: #fffcd3;
    background-color: #212d25;
    border-bottom: 1px solid #212d25;
    text-align-last: center;
    font-family: monospace, consolas;
    font-variant-caps: all-small-caps;
    text-transform: capitalize;
    box-shadow: inset 0px 0px 3px 1px #1a0505;
    border-right: 1px solid black;
    display: table-cell;
    break-after: left;
    line-break: strict;
    width: 35em;
    font-size: 1em;
}
html {
    font-variant: all-petite-caps !important;
    font-family: consolas, monospace !important;
}
{% endblock extras %}
</style>
{% endblock style %}
{% block content %}
<div class="mob">
{% for mob_id, mob in mobs.items() -%}
<div class="mob-container">
    {% if mob.stance %}
        <a class="mob-title link" href="/mob/{{ mob.id }}">{{ mob.name }}</a>
        <div class="stance-buttons">
        {% for stance, frames in mob.stance.items() %}
            <a class="stance" href="/mob/{{ mob.id }}/{{ stance }}" title="{{ stance }}">{{ stance[0] }}</a>
        {% endfor %}
        </div>
    {% else %}
        <a class="mob-title mob-main-link" href="https://maplestory.io/api/GMS/233/mob/{{ mob.id }}/">{{ mob.name }} (No data available)</a>
    {% endif %}
</div>
{%- endfor %}
</div>
{% endblock content %}