{{ 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; left: 11%; top: 11%; width: 78%; 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: 16%" src="plate-portrait.jpg"/>
                    <img style="pointer-events: none; position:absolute;z-index:5; width:100%; top: 0" src="top-border.png"/>
                    <div style="position: absolute; top: 11%; left: 14%; color: white; z-index: 99; line-height: 0.4">
                        <p style="color: cyan">{{ $char.plate_title }}</p>
                        <p>{{ $char.name }}</p>
                    </div>
                    <div style="position: absolute; top: 30%; left: 45%; color: black; z-index: 99">
                        <b>City-State</b>
                        <p>{{ $char.city_state }}</p>
                        <b>Nameday</b>
                        <p>{{ $char.nameday }}</p>
                        <b>Guardian</b>
                        <p>{{ $char.guardian}}</p>
                        <b>Favorite Class/Job</b>
                        <p>{{ title $char.plate_classjob }} (Level {{ $char.plate_classjob_level }})</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" onChange="relayout()">
        <label for="tab-2" class="tab-label">Artwork</label>
        <div class="container">
            <div class="box">
                <h2>Artwork</h2>

                <p>Here's some fan art, mostly of my own WoL. I want to do more general FFXIV fan art eventually!</p>

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