{% set instrumentClass = "flex-container" if localSettings.showDungeonItemCount else "" %}

{# Magpie is built with a width of 294 in mind - change with caution #}
{% set width = 294 %}

<div class="dungeon-parent">
    {% if localSettings.showGoMode %}
    {{ item("GO_MODE", max="2", width="58px", height="58px", top="50%", left="50%", classes="parent-center") }}
    {% endif %}
    
    <!-- D8, D1, D0 -->
    <div class="row pt-3" style="width: {{width}}px">
        <div class="col col-3"></div>

        <div class="col col-3 text-center px-0">
            <div class="{{instrumentClass}}">
                {{ item("INSTRUMENT8", max="1", secondary="REQ8", classes="") }}
                {{ item("ITEM8", max_image="1", overlay_count="ITEM8", invert_count=True, allItems=allItems, hideIfZero=True, classes="flex-item", gfx=False) }}
            </div>
            <div class="pt-2 dungeon-wrapper">
                {{ item("STONE_BEAK8", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("KEY8", width="12px", height="21px", max_image="1", overlay_count="KEY8", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("NIGHTMARE_KEY8", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("MAP8", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("COMPASS8", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
            </div>
        </div>

        <div class="col col-3 text-center px-0">
            <div class="{{instrumentClass}}">
                {{ item("INSTRUMENT1", max="1", secondary="REQ1", classes="") }}
                {{ item("ITEM1", max_image="1", overlay_count="ITEM1", invert_count=True, allItems=allItems, hideIfZero=True, classes="flex-item", gfx=False) }}
            </div>
            <div class="pt-2">
                {{ item("STONE_BEAK1", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("KEY1", width="12px", height="21px", max_image="1", overlay_count="KEY1", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("NIGHTMARE_KEY1", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("MAP1", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("COMPASS1", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
            </div>
        </div>

        <div class="col col-3 text-center px-0">
            <div class="{{instrumentClass}} great-fairy">
                {{ item("GREAT_FAIRY", max="1", classes="", gfx=False) }}
                {{ item("ITEM0", max_image="1", overlay_count="ITEM0", invert_count=True, allItems=allItems, hideIfZero=True, classes="flex-item", gfx=False) }}
            </div>
            <div class="pt-2">
                {{ item("STONE_BEAK0", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("KEY0", width="12px", height="21px", max_image="1", overlay_count="KEY0", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("NIGHTMARE_KEY0", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("MAP0", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("COMPASS0", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
            </div>
        </div>
    </div>

    <!-- D7, D2 -->
    <div class="row pt-3" style="width: {{width}}px">
        <div class="col col-3 text-center px-0">
            <div class="{{instrumentClass}}">
                {{ item("INSTRUMENT7", max="1", secondary="REQ7", classes="") }}
                {{ item("ITEM7", max_image="1", overlay_count="ITEM7", invert_count=True, allItems=allItems, hideIfZero=True, classes="flex-item", gfx=False) }}
            </div>
            <div class="pt-2">
                {{ item("STONE_BEAK7", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("KEY7", width="12px", height="21px", max_image="1", overlay_count="KEY7", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("NIGHTMARE_KEY7", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("MAP7", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("COMPASS7", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
            </div>
        </div>

        <div class="col col-6"></div>

        <div class="col col-3 text-center px-0">
            <div class="{{instrumentClass}}">
                {{ item("INSTRUMENT2", max="1", secondary="REQ2", classes="") }}
                {{ item("ITEM2", max_image="1", overlay_count="ITEM2", invert_count=True, allItems=allItems, hideIfZero=True, classes="flex-item", gfx=False) }}
            </div>
            <div class="pt-2">
                {{ item("STONE_BEAK2", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("KEY2", width="12px", height="21px", max_image="1", overlay_count="KEY2", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("NIGHTMARE_KEY2", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("MAP2", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("COMPASS2", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
            </div>
        </div>
    </div>

    <!-- D6, D3 -->
    <div class="row pt-3" style="width: {{width}}px">
        <div class="col col-3 text-center px-0">
            <div class="{{instrumentClass}}">
                {{ item("INSTRUMENT6", max="1", secondary="REQ6", classes="") }}
                {{ item("ITEM6", max_image="1", overlay_count="ITEM6", invert_count=True, allItems=allItems, hideIfZero=True, classes="flex-item", gfx=False) }}
            </div>
            <div class="pt-2">
                {{ item("STONE_BEAK6", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("KEY6", width="12px", height="21px", max_image="1", overlay_count="KEY6", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("NIGHTMARE_KEY6", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("MAP6", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("COMPASS6", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
            </div>
        </div>

        <div class="col col-6"></div>

        <div class="col col-3 text-center px-0">
            <div class="{{instrumentClass}}">
                {{ item("INSTRUMENT3", max="1", secondary="REQ3", classes="") }}
                {{ item("ITEM3", max_image="1", overlay_count="ITEM3", invert_count=True, allItems=allItems, hideIfZero=True, classes="flex-item", gfx=False) }}
            </div>
            <div class="pt-2">
                {{ item("STONE_BEAK3", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("KEY3", width="12px", height="21px", max_image="1", overlay_count="KEY3", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("NIGHTMARE_KEY3", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("MAP3", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("COMPASS3", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
            </div>
        </div>
    </div>

    <!-- D4, D5 -->
    <div class="row pt-3" style="width: {{width}}px">
        <div class="col col-3 px-0"></div>

        <div class="col col-3 text-center px-0">
            <div class="{{instrumentClass}}">
                {{ item("INSTRUMENT5", max="1", secondary="REQ5", classes="") }}
                {{ item("ITEM5", max_image="1", overlay_count="ITEM5", invert_count=True, allItems=allItems, hideIfZero=True, classes="flex-item", gfx=False) }}
            </div>
            <div class="pt-2">
                {{ item("STONE_BEAK5", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("KEY5", width="12px", height="21px", max_image="1", overlay_count="KEY5", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("NIGHTMARE_KEY5", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("MAP5", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("COMPASS5", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
            </div>
        </div>

        <div class="col col-3 text-center px-0">
            <div class="{{instrumentClass}}">
                {{ item("INSTRUMENT4", max="1", secondary="REQ4", classes="") }}
                {{ item("ITEM4", max_image="1", overlay_count="ITEM4", invert_count=True, allItems=allItems, hideIfZero=True, classes="flex-item", gfx=False) }}
            </div>
            <div class="pt-2">
                {{ item("STONE_BEAK4", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("KEY4", width="12px", height="21px", max_image="1", overlay_count="KEY4", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("NIGHTMARE_KEY4", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("MAP4", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
                {{ item("COMPASS4", max="1", width="12px", height="21px", classes="small", allItems=allItems, hideIfZero=True, gfx=False) }}
            </div>
        </div>
    </div>
</div>