49 lines
3.3 KiB
Handlebars
49 lines
3.3 KiB
Handlebars
|
|
<section class="motherboard-content tab {{#if (eq activeTab 'motherboard')}}active{{/if}}" data-group="primary" data-tab="motherboard">
|
|
<div class="motherboard-header" style="margin-bottom: 2rem;">
|
|
<h2><i class="fa-solid fa-microchip"></i> {{localize "DAGGERHEART.ITEMS.Ikonis.Motherboard"}}</h2>
|
|
<div class="slots-info">
|
|
<span>{{usedSlots}} / {{maxSlots}} {{localize "DAGGERHEART.ITEMS.Ikonis.AugmentSlots"}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{#if ikonis.bonded}}
|
|
<div class="bonded-feature motherboard-card" style="border-left: 4px solid #ff2e63; background: rgba(255,46,99,0.05); margin-bottom: 2rem; padding: 1rem; border-radius: 8px;">
|
|
<div class="bonded-info" style="display: flex; align-items: center; gap: 1rem;">
|
|
<div class="text">
|
|
<h3 style="margin: 0; color: #ff2e63; font-size: 1.2rem;">{{ikonis.bonded.fullName}} (Primary)</h3>
|
|
<p style="margin: 0.25rem 0 0 0; color: #d1d8e0; font-size: 0.95rem;">{{ikonis.bonded.effect}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
|
|
<div class="augments-section">
|
|
<div class="section-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
|
|
<h3 style="margin: 0; color: #e0e0e0;">Installed Augments</h3>
|
|
<button type="button" class="add-augment-btn" data-action="addAugment" style="background: #ff2e63; color: white; border: none; padding: 0.4rem 0.8rem; border-radius: 4px; cursor: pointer;">
|
|
<i class="fa-solid fa-plus"></i> Install Tech
|
|
</button>
|
|
</div>
|
|
|
|
<div class="augments-list" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
|
|
{{#each ikonis.augments as |aug|}}
|
|
<div class="augment-item motherboard-card" style="padding: 1rem; background: rgba(255,255,255,0.02); border: 1px solid #2d3436; border-radius: 8px; position: relative; min-height: 85px; display: flex; flex-direction: column;">
|
|
<a class="remove-btn" data-action="removeAugment" data-id="{{aug.id}}" style="position: absolute; top: 0.5rem; right: 0.5rem; color: #666; cursor: pointer;"><i class="fa-solid fa-trash-alt"></i></a>
|
|
<div style="display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.25rem;">
|
|
<span class="aug-name" style="font-weight: bold; font-size: 1.1rem; color: #ffffff;">{{aug.name}}</span>
|
|
</div>
|
|
<div class="aug-stats" style="font-size: 0.9rem; color: #a4b0be; line-height: 1.3;">
|
|
<div class="effect" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{aug.effect}}</div>
|
|
<div class="cost" style="color: #ff2e63; font-style: italic;">{{aug.cost}}</div>
|
|
{{#if aug.precompile}}<div class="precompile" style="color: #ff9f43; font-weight: bold;">{{aug.precompile}}</div>{{/if}}
|
|
</div>
|
|
</div>
|
|
{{else}}
|
|
<div class="empty-msg" style="grid-column: 1/-1; text-align: center; padding: 2rem; border: 1px dashed #333; border-radius: 8px; color: #666;">
|
|
No hardware modules detected. Click <strong>Install Tech</strong> to begin.
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
</section>
|