foundry-Slamother/templates/actor/ship-sheet-sbt.html

<form class="{{cssClass}}" autocomplete="off">

    

    <!-- Actor Sidebar Buttons -->
    <div class="actor-sidebar side-body"  id="side-body">
        <nav class="mosh actor-sidebar-row" id="side-tabs" style="height: auto; gap: 4px;" data-group="primary">
            <a class="tab-select button-black actor-sidebar-tab megadamage-sidebar-button" data-tab="close">X</a>
            <a class="tab-select button-black actor-sidebar-tab megadamage-sidebar-button" data-tab="megadamage">Megadamage</a>
            <a class="tab-select button-black actor-sidebar-tab megadamage-sidebar-button" data-tab="macros">Macros</a>
        </nav>
        <div class="actor-sidebar-row">

            <!-- <i class="fa-solid fa-folder"></i>
            <div class="button-black actor-sidebar-tab megadamage-sidebar-button list-roll">Megadamage</div>
            <div class="button-black actor-sidebar-tab megadamage-sidebar-button list-roll">Macros</div> -->
        </div>

        <!-- CLOSED -->
        <div class="tab" data-group="primary" data-tab="close">


        </div>

        <!-- MEGADAMAGE -->
        <div class="tab megadamage sbt-megadamage" data-group="primary" data-tab="megadamage">
            <div class="circlestattitle">Megadamage</div>

            <br/>
            <div class="megadamage-list">{{{system.megadamage.html}}}</div>

            <div class="circle-statwrapper"> 
                <div class="resource healthspread minmaxtopstat flex-center" style="grid-template-rows: max-content;">
                    <label for="system.supplies.hull.value" class="resource-label minmaxtext">Hull Points</label>

                    <div class="valuewrapper" style="width: 120px; background: white;">
                        <input class="maxhealth-input darkGreyText" type="text" name="system.supplies.hull.value"
                            value="{{system.supplies.hull.value}}" data-dtype="Number" />
                    </div>
                </div>
            </div>
            <!-- Megadamage Settings -->
            <!-- <div class="button-grey megadamage-menu-button list-roll">Popout</div> -->
        </div>

        <!-- MACROS -->
        <div class="tab megadamage sbt-megadamage" data-group="primary" data-tab="macros">
            <div class="circlestattitle">Macros</div>

            <br/>
            <!-- Emergency -->
            <div class="circle-statwrapper" style="gap: 10px;">
                <div class="circlestattitle">Emergency <i class="fa-solid fa-tower-broadcast"></i></div>
                <!-- Distress! -->
                <div class="button-black distress-button list-roll" style="width: 95%;">Distress Signal</div>
        
            </div>
        
            <br/>
        
            <!-- Finance -->
            <div class="circle-statwrapper" style="gap: 5px;">
        
                <div class="circlestattitle">Finances <i class="fa-solid fa-chart-line-down"></i></div>
        
        
                <div class="resource circle-stat">
                    <input class="circle-input" type="text" name="system.stats.bankruptcy.value"
                        value="{{system.stats.bankruptcy.value}}" data-dtype="Number" />
                </div>
                <div class="circlestatlabel">
                    <span class="ability-mod circlestattext" data-key="bankruptcy" data-label="Bankruptcy">Bankruptcy</span>
                </div>
        
                <div class="button-black bankruptcy-button list-roll" style="width: 95%;">Bankruptcy Check</div>
        
        
            </div>
        
            <br/>
        
            <div class="circle-statwrapper" style="gap: 10px;">
                <div class="circlestattitle">Maintenance & Repairs <i class="fa-solid fa-wrench"></i></div>
                <!-- Maintenance -->
                <div class="button-black maintenance-button list-roll" style="width: 95%;">Maintenance Check</div>
                <!-- Starting Conditions -->
                <!-- <div class="button-black maintenance-button list-roll" style="width: 95%;">Roll Starting Condition</div> -->
            </div>

            <br/>
            <!-- Stats -->
            <div class="circle-statwrapper" style="gap: 10px;">
                <div class="circlestattitle">Enemy Ships <i class="fa-solid fa-rocket"></i></div>
                <!-- Morale -->
                <div class="button-black morale-button list-roll" style="width: 95%;">Morale Check</div>
            </div>
        

        </div>

    </div>


    {{!-- Sheet Header --}}
    <div class="header" style="grid-template-columns: 0.15fr 1fr;">
        
        <img class="sbt-profile" src="{{img}}" data-edit="img" title="{{name}}" height="150" width="150" />

        <div class="headergrid" style="grid-template-columns: 1fr 0.2fr; padding: 1em;">
            <!-- <img class="profile-img" src="{{img}}" data-edit="img" title="{{name}}" height="150" width="150"/> -->

            <!-- SHIP NAME -->
            <div class="">
                <div class="headerinputtext">SHIP IDENTIFIER</div>
                <div class="headerinputfield charname"><input name="name" class="noborder" type="text" value="{{name}}"
                        placeholder="Name" /></div>
            </div>


            <!-- <div class="button-black deckplan-button list-roll">Distress</div> -->

            <!-- Transponder -->
            <div class="transponder">
                <div class="headerinputtext">Transponder</div>
                <div class=""><input class="checkbox" type="checkbox" name="system.transponder" data-dtype="Boolean" {{checked system.transponder}}/></div>
            </div>

            <!-- Macro Menu -->
            <!-- <div class="center-icon">
                <i class="fa-regular fa-ellipsis-vertical macro-menu-button list-roll"></i>
            </div> -->

            <!-- Distress -->
            <!-- <div class="transponder">
                <div class="headerinputtext">Distress</div>
                <div class=""><input class="checkbox" type="checkbox" name="system.distress" data-dtype="Boolean" {{checked system.distress}}/></div>
            </div> -->


            <!-- Captain -->
            <!-- <div class="">
                <div class="headerinputtext">CAPTAIN</div>
                <div class="headerinputfield charname"><input name="system.captain" class="noborder" type="text"
                        value="{{system.captain}}" placeholder="" /></div>
            </div> -->

            <!-- RANK -->
            <!-- <div class="" style="grid-column: 1/-1;">
                <div class="headerinputtext">Make / Model / Jump / Class / Type</div>
                <div class="headerinputfield charname"><input name="system.make" class="noborder" type="text"
                        value="{{system.make}}" placeholder="" /></div>
            </div> -->

        </div>
    </div>


    <div class="ship-sbt-stats-grid" style="margin-top: 10px; margin-bottom: 10px; height: 405px;">

        <!-- Stats -->
        <div class="grid grid-1col" style="width: 98%; gap: 10px;">
            <div class="circle-statwrapper">
                <div class="circlestattitle">Stats & Saves</div>


                <!-- Thrusters -->
                <div class="resource circle-stat">
                    <!-- <div class="circle-input-swapper"> -->
                        <input class="circle-input" type="text" name="system.stats.thrusters.value"
                            value="{{system.stats.thrusters.value}}" data-dtype="Number" />
                        <!-- <div class="circle-input box2">{{system.stats.thrusters.value}}</div> -->
                    <!-- </div> -->
                </div>
                <div class="circlestatlabel">
                    <span class="ability-mod stat-roll rollable circlestattext" data-key="thrusters"
                        data-label="Thrusters">Thrusters</span>
                </div>

                <!-- Battle -->
                <div class="resource circle-stat">
                    <input class="circle-input" type="text" name="system.stats.battle.value"
                        value="{{system.stats.battle.value}}" data-dtype="Number" />
                </div>
                <div class="circlestatlabel">
                    <span class="ability-mod stat-roll rollable circlestattext" data-key="battle" data-roll="d100"
                        data-label="Battle">Battle</span>
                </div>

                <!-- Systems -->
                <div class="resource circle-stat">
                    <input class="circle-input" type="text" name="system.stats.systems.value"
                        value="{{system.stats.systems.value}}" data-dtype="Number" />
                </div>
                <div class="circlestatlabel">
                    <span class="ability-mod stat-roll rollable circlestattext" data-key="systems" data-roll="d100"
                        data-label="Systems">SYSTEMS</span>
                </div>
            </div>

            <!-- Oxygen Remaining -->
            <div class="circle-statwrapper">
                <div class="resource circle-stat">
                    <input class="circle-input" type="text" name="system.stats.oxygen.value"
                        value="{{system.stats.oxygen.value}}" data-dtype="Number" />
                </div>
                <div class="circlestatlabel">
                    <span class="circlestattext">O2 Remaining</span>
                </div>
            </div>
        </div>

        <div class="grid grid-1col" style="display: flex; flex-direction: column; gap: 10px;">

            <!-- Make/Model/ETC -->
            <div class="area-title">Make / Model / Jump / Class / Type</div>
            <textarea name="system.make" rows="2" class="sbt-text-area" type="text"
            data-target="system.make" placeholder="" style="height: 110px; text-align: center;">{{system.make}}</textarea>

            <div class="circle-statwrapper-horizontal" style="gap: 10%; height: 100px; padding: 20px;">
                <!-- Fuel -->
                <div class="resource healthspread minmaxtopstat flex-center">
                    <label for="system.supplies.fuel.value" class="resource-label minmaxtext">Fuel</label>

                    <div class="minmaxwrapper">
                        <input class="maxhealth-input darkGreyText" type="text" name="system.supplies.fuel.value"
                            value="{{system.supplies.fuel.value}}" data-dtype="Number" />
                        <div class="slant"></div>
                        <input class="maxhealth-input darkGreyText" type="text" name="system.supplies.fuel.max"
                            value="{{system.supplies.fuel.max}}" data-dtype="Number" />
                    </div>

                    <div class="healthmaxtext">Current</div>
                    <div class="healthmaxtext">Maximum</div>
                </div>

                <!-- Warp Cores -->
                <div class="section-vertical-flex">
                    <div class="resource circle-stat">
                        <input class="circle-input" type="text" name="system.supplies.warp-cores.value"
                            value="{{system.supplies.warp-cores.value}}" data-dtype="Number" />
                    </div>
                    <div class="circlestatlabel">
                        <span class="ability-mod circlestattext">WARP</span>
                        <span class="ability-mod circlestattext">CORES</span>
                    </div>
                </div>
            </div>

            <div class="circle-statwrapper-horizontal" style="gap: 10%; height: 100px; padding: 20px;">
                <!-- Cryopods -->
                <div class="section-vertical-flex">
                    <div class="resource circle-stat">
                        <input class="circle-input" type="text" name="system.supplies.cryopods.value"
                            value="{{system.supplies.cryopods.value}}" data-dtype="Number" />
                    </div>
                    <div class="circlestatlabel">
                        <span class="ability-mod circlestattext">Cryopods</span>
                    </div>
                </div>

                <!-- Escape Pods -->
                <div class="section-vertical-flex">
                    <div class="resource circle-stat">
                        <input class="circle-input" type="text" name="system.supplies.escape-pods.value"
                            value="{{system.supplies.escape-pods.value}}" data-dtype="Number" />
                    </div>
                    <div class="circlestatlabel">
                        <span class="ability-mod circlestattext">Escape Pods</span>
                    </div>
                </div>
            </div>

                <!-- Ship Deckplan -->
                <div class="button-black deckplan-button list-roll">Open Deckplan</div>

        </div>


        <!-- SIDE PANEL -->
        <div class="sbt-crew-section scroll-lock">
            <!-- <nav class="mosh sheet-tabs tabs" id="side-tabs" style="height: auto;" data-group="primary">
                <a class="tab-select" data-tab="crew">Crew</a>
                <a class="tab-select" data-tab="megadamage">Damage</a>
            </nav> -->
                <!-- CREW COUNTER -->
                <div class="resource healthspread minmaxtopstat flex-center" style="margin: auto; margin-top: 2px;">
                <label for="system.stats.crew.value" class="resource-label minmaxtext">CREW</label>

                <div class="minmaxwrapper-black">
                    <input class="maxhealth-input darkGreyText" type="text" name="system.supplies.crew.value"
                        value="{{system.supplies.crew.value}}" data-dtype="Number" />
                    <div class="slant"></div>
                    <input class="maxhealth-input darkGreyText" type="text" name="system.supplies.crew.max"
                        value="{{system.supplies.crew.max}}" data-dtype="Number" />
                </div>

                <div class="healthmaxtext">Current</div>
                <div class="healthmaxtext">Maximum</div>
            </div>

            <div class="blackline"></div>

            {{#each crew as | crew id|}}
            <div class="creature-ability-container item" data-item-id="{{crew._id}}">
                <div class="sbt-crew-name">
                    {{crew.name}}
                    <label class="hidden-item-controls" style="margin-left: 3px; font-size: 0.7rem;">
                        <a class="item-control item-edit darkgrey" title="Edit Crew Member"><i
                                class="fas fa-edit"></i></a>
                        <a class="item-control item-delete darkgrey" title="Delete Crew Member"><i
                                class="fas fa-trash"></i></a>
                    </label>
                </div>
                <div class="sbt-crew-job itemtext">{{{crew.system.job}}}</div>

            </div>

            {{/each}}
            <a class="item-control weapon-create darkgrey " style="margin-left: 5px;" title="Create Crew Member"
                data-type="crew"><i class="fas fa-plus"></i> Add</a>
        </div>
    </div>

    <!------------------------------------------------------------
        ___  ___ _____ _____ ___  __  __   _____ _   ___ 
        | _ )/ _ \_   _|_   _/ _ \|  \/  | |_   _/_\ | _ )
        | _ \ (_) || |   | || (_) | |\/| |   | |/ _ \| _ \
        |___/\___/ |_|   |_| \___/|_|  |_|   |_/_/ \_\___/

    ------------------------------------------------------------->

    {{!-- Sheet Tab Navigation --}}
    <nav class="mosh sheet-tabs tabs" id="sheet-tabs" style="height: auto;" data-group="primary">
        <a class="tab-select" data-tab="weapons">Weapons</a>
        <a class="tab-select" data-tab="modules">Upgrades</a>
        <a class="tab-select" data-tab="cargo">Cargo</a>
        <a class="tab-select" data-tab="repairs">Repairs</a>
        <a class="tab-select" data-tab="description">Notes</a>
    </nav>

    {{!-- Sheet Body --}}
    <section class="sheet-body" id="sheet-body">

        {{!-- Biography Tab --}}
        <div class="tab biography" data-group="primary" data-tab="description">
            <!-- Macro Menu -->
            <!-- <div class="center-icon">
                <i class="fa-solid fa-wrench setup-menu-button list-roll"></i>
            </div> -->
            {{editor system.biography target="system.biography" button=true owner=owner editable=true}}
        </div>

        {{!-- Layout Tab --}}
        <div class="tab biography" data-group="primary" data-tab="layout">
            <img class="img" style="width: 100%; height: auto;" src="{{system.images.layout}}"
                data-edit="system.images.layout" title="{{system.images.layout}}" />
        </div>
        {{!-- Owned Weapons Tab --}}
        <div class="tab items" data-group="primary" data-tab="weapons">

            <div class="circle-statwrapper-horizontal" style="gap: 10%; height: 100px; padding: 20px;">
                <!-- Weapons -->
                <div class="resource healthspread minmaxtopstat flex-center">
                    <label for="system.weapon-stats.weapons.value" class="resource-label minmaxtext">Weapons</label>

                    <div class="minmaxwrapper">
                        <input class="maxhealth-input darkGreyText" type="text" name="system.weapon-stats.weapons.value"
                            value="{{system.weapon-stats.weapons.value}}" data-dtype="Number" />
                        <div class="slant"></div>
                        <input class="maxhealth-input darkGreyText" type="text" name="system.weapon-stats.weapons.max"
                            value="{{system.weapon-stats.weapons.max}}" data-dtype="Number" />
                    </div>

                    <div class="healthmaxtext">Base</div>
                    <div class="healthmaxtext">Total</div>
                </div>

                <!-- Megadamage -->
                <div class="resource healthspread minmaxtopstat flex-center">
                    <label for="system.weapon-stats.megadamage.value" class="resource-label minmaxtext">Megadamage</label>

                    <div class="minmaxwrapper">
                        <input class="maxhealth-input darkGreyText" type="text" name="system.weapon-stats.megadamage.value"
                            value="{{system.weapon-stats.megadamage.value}}" data-dtype="String" />
                        <div class="slant"></div>
                        <input class="maxhealth-input darkGreyText" type="text" name="system.weapon-stats.megadamage.max"
                            value="{{system.weapon-stats.megadamage.max}}" data-dtype="String" />
                    </div>

                    <div class="healthmaxtext">Base</div>
                    <div class="healthmaxtext">Total</div>
                </div>

                <!-- Hardpoints -->
                <div class="resource healthspread minmaxtopstat flex-center">
                    <label for="system.weapon-stats.hardpoints.value" class="resource-label minmaxtext">Hardpoints</label>

                    <div class="minmaxwrapper">
                        <input class="maxhealth-input darkGreyText" type="text" name="system.weapon-stats.hardpoints.value"
                            value="{{system.weapon-stats.hardpoints.value}}" data-dtype="Number" />
                        <div class="slant"></div>
                        <input class="maxhealth-input darkGreyText" type="text" name="system.weapon-stats.hardpoints.max"
                            value="{{system.weapon-stats.hardpoints.max}}" data-dtype="Number" />
                    </div>

                    <div class="healthmaxtext">Installed</div>
                    <div class="healthmaxtext">Maximum</div>
                </div>

            </div>

            <!-- WEAPONS -->
            <ol class="items-list">
                <li class="item flexrow item-header">
                    <div class="item-image"></div>
                    <div class="skill-stat" style="flex-grow: 2;">Name</div>
                    <div class="skill-stat">Bonus</div>
                    <div class="item-controls">
                        <a class="item-control weapon-create" title="Create Weapon" data-type="weapon">
                            <i class="fas fa-plus"></i> Add
                        </a>
                    </div>
                </li>
                {{#each weapons as |weapon id|}}
                <li class="item flexrow dropitem" data-item-id="{{weapon._id}}">
                    <!-- <div class="item-image"><img src="{{skill.img}}" title="{{skill.name}}" width="24" height="24"/></div> -->
                    <div class="item-image"><img src="{{weapon.img}}" title="{{weapon.name}}" width="24" height="24" />
                    </div>
                    <div class="skill-name weapon-roll list-roll" style="flex-grow: 2;">{{weapon.name}}</div>
                    <div class="skill-stat">{{weapon.system.bonus}}</div>
                    <div class="item-controls">
                        <a class="item-control weapon-edit" title="Edit Weapon"><i class="fas fa-edit"></i></a>
                        <a class="item-control item-delete" title="Delete Weapon"><i class="fas fa-trash"></i></a>
                    </div>
                </li>
                {{/each}}
            </ol>
        </div>
        {{!-- Owned Modules Tab --}}
        <div class="tab items" data-group="primary" data-tab="modules">

            <div class="circle-statwrapper-horizontal" style="gap: 10%; height: 100px; padding: 20px;">
                <!-- Upgrades -->
                <div class="resource healthspread minmaxtopstat flex-center" style="width: 180px;">
                    <label for="system.supplies.upgrades.value" class="resource-label minmaxtext">Upgrades</label>

                    <div class="minmaxwrapper">
                        <input class="maxhealth-input darkGreyText" type="text" name="system.supplies.upgrades.value"
                            value="{{system.supplies.upgrades.value}}" data-dtype="Number" />
                        <div class="slant"></div>
                        <input class="maxhealth-input darkGreyText" type="text" name="system.supplies.upgrades.max"
                            value="{{system.supplies.upgrades.max}}" data-dtype="Number" />
                    </div>

                    <div class="healthmaxtext">Base</div>
                    <div class="healthmaxtext">Total</div>
                </div>

            </div>

            <!-- ITEMS -->
            <ol class="items-list">
                <li class="item flexrow item-header">
                    <div class="item-image"></div>
                    <div class="skill-stat" style="flex-grow: 2;">Module Name</div>
                    <div class="skill-stat">Quantity</div>
                    <div class="skill-stat">Cost</div>
                    <div class="skill-stat" style="flex-grow: 2;">Feature</div>
                    <div class="item-controls">
                        <a class="item-control item-create" title="Create Module" data-type="module">
                            <i class="fas fa-plus"></i> Add
                        </a>
                    </div>
                </li>
                {{#each modules as |module id|}}
                <li class="item flexrow dropitem" data-item-id="{{module._id}}">
                    <div class="item-image"><img src="{{module.img}}" title="{{module.name}}" width="24" height="24" />
                    </div>
                    <h4 class="skill-name list-roll description-roll" style="flex-grow: 2;">{{module.name}}</h4>
                    <div class="skill-stat list-roll item-quantity">{{module.system.quantity}}</div>
                    <div class="skill-stat">{{module.system.cost}}</div>
                    <div class="skill-stat" style="flex-grow: 2;">{{module.system.feature}}</div>
                    <div class="item-controls">
                        <a class="item-control item-edit" title="Edit Module"><i class="fas fa-edit"></i></a>
                        <a class="item-control item-delete" title="Delete Module"><i class="fas fa-trash"></i></a>
                    </div>
                </li>
                {{/each}}
            </ol>
        </div>
        {{!-- Owned Cargo Tab --}}
        <div class="tab items" data-group="primary" data-tab="cargo">
            <!-- ITEMS -->
            <ol class="items-list">
                <li class="item flexrow item-header">
                    <div class="item-image"></div>
                    <div class="skill-stat" style="flex-grow: 2;">Item Name</div>
                    <div class="skill-stat">Quantity</div>
                    <div class="skill-stat">Weight</div>
                    <div class="skill-stat">Value</div>
                    <div class="item-controls">
                        <a class="item-control item-create" title="Create Item" data-type="item"><i
                                class="fas fa-plus"></i> Add</a>
                    </div>
                </li>
                {{#each cargo as |item id|}}
                <li class="item flexrow dropitem" data-item-id="{{item._id}}">
                    <div class="item-image"><img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
                    </div>
                    <h4 class="skill-name list-roll description-roll" style="flex-grow: 2;">{{item.name}}</h4>
                    <div class="skill-stat list-roll item-quantity">{{item.system.quantity}}</div>
                    <div class="skill-stat">{{item.system.weight}}</div>
                    <div class="skill-stat">{{item.system.cost}}</div>
                    <div class="item-controls">
                        <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
                        <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
                    </div>
                </li>
                {{/each}}
            </ol>
        </div>
        {{!-- Repair Tab --}}
        <div class="tab items" data-group="primary" data-tab="repairs">
            <div style="display: flex; gap: 10px;">
                <!-- Repairs -->
                <ol class="items-list" style="width: 100%;">
                    <li class="item flexrow item-header">
                        <div class="item-image"></div>
                        <div class="skill-stat" style="flex-grow: 2;">Repairs</div>
                        <div class="skill-stat">Type</div>
                        <div class="item-controls">
                            <a class="item-control item-create" title="Create Item" data-type="repair" data-subtype="minor"><i
                                    class="fas fa-plus"></i> Add</a>
                        </div>
                    </li>
                    {{#each majorRepairs as |item id|}}
                    <li class="item flexrow dropitem" data-item-id="{{item._id}}">
                        <div class="item-image"><img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
                        </div>
                        <h4 class="skill-name list-roll description-roll" style="flex-grow: 2;">{{item.name}}</h4>
                        <div class="skill-stat">
                            Major
                        </div>
                        <div class="item-controls">
                            <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
                            <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
                        </div>
                    </li>
                    {{/each}}
                    {{#each minorRepairs as |item id|}}
                    <li class="item flexrow dropitem" data-item-id="{{item._id}}">
                        <div class="item-image"><img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
                        </div>
                        <h4 class="skill-name list-roll description-roll" style="flex-grow: 2;">{{item.name}}</h4>
                        <div class="skill-stat">
                            Minor
                        </div>
                        <div class="item-controls">
                            <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
                            <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
                        </div>
                    </li>
                    {{/each}}
                </ol>
            </div>
        </div>
    </section>
</form>