66 lines
4.9 KiB
Handlebars
66 lines
4.9 KiB
Handlebars
|
|
<div class="ikonis-manager-container" style="background: #0f0f1b; color: white; padding: 1.5rem; height: 100%; display: flex; flex-direction: column; gap: 1.5rem;">
|
|
|
|
<div class="manager-section bonded-config">
|
|
<h3 style="color: #ff2e63; border-bottom: 1px solid #ff2e63; padding-bottom: 0.5rem; margin-top: 0;">
|
|
<i class="fa-solid fa-link"></i> Bonded Feature Configuration
|
|
</h3>
|
|
<div class="bonded-slot motherboard-card" data-slot="bonded" style="padding: 1rem; background: rgba(255,255,255,0.03); border: 1px dashed #444;">
|
|
<p style="font-size: 0.9rem; color: #888; margin-bottom: 0.5rem;">Attach the core feature of this motherboard.</p>
|
|
<div class="feature-drop-zone {{#if ikonis.bonded.feature}}filled{{else}}empty{{/if}}" data-augment-id="bonded" style="min-height: 60px; border: 2px dashed #333; border-radius: 8px; display: flex; align-items: center; justify-content: center;">
|
|
{{#if ikonis.bonded.feature}}
|
|
<div class="feature-display" style="display: flex; align-items: center; gap: 1rem; width: 100%; padding: 0.5rem;">
|
|
<img src="{{ikonis.bonded.feature.img}}" style="width: 40px; height: 40px; border-radius: 4px;">
|
|
<span style="font-weight: bold; flex: 1;">{{ikonis.bonded.feature.name}}</span>
|
|
<a data-action="removeFeature" data-augment-id="bonded" style="color: #ff2e63;"><i class="fa-solid fa-times-circle"></i></a>
|
|
</div>
|
|
{{else}}
|
|
<span style="color: #444;">Drop Feature Item Here</span>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="manager-section augments-config" style="flex: 1; display: flex; flex-direction: column;">
|
|
<h3 style="color: #ff2e63; border-bottom: 1px solid #ff2e63; padding-bottom: 0.5rem;">
|
|
<i class="fa-solid fa-microchip"></i> Augment Slots ({{usedSlots}} / {{maxSlots}})
|
|
</h3>
|
|
|
|
<div class="slots-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; overflow-y: auto; flex: 1; padding-top: 0.5rem;">
|
|
{{#each ikonis.slots as |slot|}}
|
|
<div class="slot-card motherboard-card" style="background: rgba(255,255,255,0.03); border: 1px solid #2d3436; border-radius: 12px; display: flex; flex-direction: column;">
|
|
<div class="slot-header" style="background: rgba(255,255,255,0.05); padding: 0.5rem 1rem; display: flex; justify-content: space-between; align-items: center;">
|
|
<span style="font-weight: bold; color: #ff2e63;">Slot {{slot.index}}</span>
|
|
{{#if slot.aug}}
|
|
<a data-action="removeAugment" data-id="{{slot.aug.id}}" style="color: #888;"><i class="fa-solid fa-trash-alt"></i></a>
|
|
{{/if}}
|
|
</div>
|
|
<div class="slot-body" style="padding: 1rem; flex: 1; display: flex; flex-direction: column; gap: 0.75rem;">
|
|
{{#if slot.aug}}
|
|
<div class="aug-info">
|
|
<div style="font-weight: bold; font-size: 1.1rem;">{{slot.aug.name}}</div>
|
|
<div style="font-size: 0.9rem; color: #d1d8e0;">{{slot.aug.effect}}</div>
|
|
<div style="font-size: 0.8rem; color: #888; font-style: italic;">Cost: {{slot.aug.cost}}</div>
|
|
</div>
|
|
<div class="feature-drop-zone {{#if slot.aug.feature}}filled{{else}}empty{{/if}}" data-augment-id="{{slot.aug.id}}" style="min-height: 50px; border: 2px dashed #333; border-radius: 8px; display: flex; align-items: center; justify-content: center;">
|
|
{{#if slot.aug.feature}}
|
|
<div class="feature-display" style="display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.25rem;">
|
|
<img src="{{slot.aug.feature.img}}" style="width: 30px; height: 30px; border-radius: 4px;">
|
|
<span style="font-size: 0.9rem; flex: 1;">{{slot.aug.feature.name}}</span>
|
|
<a data-action="removeFeature" data-augment-id="{{slot.aug.id}}" style="color: #ff2e63;"><i class="fa-solid fa-times"></i></a>
|
|
</div>
|
|
{{else}}
|
|
<span style="font-size: 0.8rem; color: #444;">Drop Feature</span>
|
|
{{/if}}
|
|
</div>
|
|
{{else}}
|
|
<button type="button" class="install-btn" data-action="addAugment" style="flex: 1; background: transparent; border: 2px dashed #333; color: #444; border-radius: 8px; cursor: pointer;">
|
|
<i class="fa-solid fa-plus"></i> Install Tech
|
|
</button>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
</div>
|