seagull-game/pak/templates/charsheet.j2

<div id="charsheet-root">
    <div id="charsheet-leftside">
        <div id "attr-points">
            Available Points: <span id="lbl-attr-points">0</span>
        </div>
        <div class="attr" id="attr-agility">
            Agility: <span id="lbl-attr-agility">0</span>
        </div>
        <div class="attr" id="attr-instinct">
            <span id="lbl-attr-instinct-txt">Instinct</span>: <span id="lbl-attr-instinct">0</span>
        </div>
        <div class="attr" id="attr-leadership">
            Leadership: <span id="lbl-attr-leadership">0</span>
        </div>
    </div>
    <div id="charsheet-rightside">
        <div id="charsheet-upgrade-tabbar">
            <nav id="nav-upgrades"><ul>
                <li><button id="btn-upgrade-agility">Agility Upgrades</button></li>
                <li><button id="btn-upgrade-instinct">Instinct Upgrades</button></li>
                <li><button id="btn-upgrade-leadership">Leadership Upgrades</button></li>
            </ul></nav>
        </div>
        <div id="charsheet-upgrade-tree">
            <pre class="mermaid" id="upgrade-tree-data"></pre>
        </div>
        <div id="charsheet-upgrade-details">
            <h1 id="lbl-upgrade-name">Upgrade Name</h1>
            <p id="txt-upgrade-desc">Upgrade description.</p>
            <p>This upgrade requires:</p>
            <ul id="lst-upgrade-requires">
            </ul>
            <p><button id="btn-upgrade-confirm">Confirm Purchase</button> <button id="btn-upgrade-cancel">Cancel</button></p>
        </div>
    </div>
</div>