{{ define "main" }}
    <h2>{{ .Title }}</h2>

    <hr>

    {{ $char := index .Site.Data "character" }}

    <div class="tabs-container">
        <input type="radio" id="tab-1" name="my-tabs" checked>
        <label for="tab-1" class="tab-label">Adventurer Plate</label>
        <div class="container">
            <div class="box">
                <div style="width:100%; height:auto; aspect-ratio: 1.846153846153846; display: inline-block; position: relative">
                    <img style="pointer-events: none; position: absolute; width: 50%" src="backing.png"/>
                    <img style="pointer-events: none; position:absolute; left: 10%; top: 10%; width: 80%; z-index: 1" src="base-plate.png"/>
                    <img style="pointer-events: none; position:absolute; left: 10%; top: 10%; width: 80%; z-index: 2" src="pattern-overlay.png"/>
                    <img style="pointer-events: none; position:absolute;z-index:4; width:100%" src="plate-frame.png"/>
                    <img style="pointer-events: none; position:absolute;z-index:3; width:25%; left: 15%; top: 15%" src="plate-portrait.png"/>
                    <img style="pointer-events: none; position:absolute;z-index:5; height:135%; top: -14%; left: 5%" src="portrait-frame.png"/>
                    <img style="pointer-events: none; position:absolute;z-index:5; width:100%; top: 0" src="top-border.png"/>
                    <img style="pointer-events: none; position:absolute;z-index:5; width:100%; bottom: 0" src="bottom-border.png"/>
                    <div style="position: absolute; top: 30%; left: 45%; color: white; z-index: 99">
                        <b>Title</b>
                        <p>{{ $char.plate_title }}</p>
                        <b>Name</b>
                        <p>{{ $char.name }}</p>
                        <b>Favorite Class/Job</b>
                        <p>{{ $char.plate_classjob }} LEVEL {{ $char.plate_classjob_level }}</p>
                        <b>Comment</b>
                        <p>{{ $char.search_comment }}</p>
                    </div>
                </div>
                <p style="text-align: center">Generated by <a href="http://xiv.zone/software/auracite">Auracite</a>.</p>
            </div>
        </div>

        <input type="radio" id="tab-2" name="my-tabs" checked>
        <label for="tab-2" class="tab-label">Artwork</label>
        <div class="container">
            <div class="box">
                <h2>Artwork</h2>

                <p>Here's some fan art of my WoL, I want to do more general FFXIV fan art in the future too!</p>

                <div style="height: 500px; overflow: auto">
                {{ partial "art-section" . }}
                </div>
            </div>
        </div>

        <input type="radio" id="tab-3" name="my-tabs">
        <label for="tab-3" class="tab-label">Mods</label>
        <div class="container">
            <div class="box">
                <h2>My Mods</h2>

                <p>I have created a few mods to enhance the game:</p>

                <ul>
                    <li><a href="https://xiv.zone/mods/rebound">Rebound</a>: Somehow even after the big graphical update, Square Enix hasn't fixed the bug where certain character physics (like the Viera ear wiggle) breaks under high framerates.</li>
                    <li><a href="https://xiv.zone/mods/refitter">Refitter</a>: I didn't like how some armor fit on my WoL, so I fixed it myself.</li>
                    <li><a href="https://xiv.zone/mods/hooky">Hooky</a>: I don't use this too much yet, but I really liked making it!</li>
                </ul>
        </div>
    </div>

    <style>
        .container {
            display: flex;
            column-gap: 15px;
            width: 100%;
            order: 99;
        }

        .box {
            display: block;
            width: 100%;
            border: 1px solid gray;
            padding: 5px;
        }

        .tabs-container {
            display: flex;
            flex-wrap: wrap;
        }
        .tabs-container > input[type="radio"]:not(:checked)+.tab-label+.container {
            display: none;
        }
    </style>
{{ end }}