ATLYSS TechPendium

exports = {
  /**
   * Character calculator
   * Returns HTML as plain text
   * No DOM, no jQuery, no logic
   */
  character(options = {}) {
    const version = options.version || 'latest';

    return `
<div
  class="lgws-calculator"
  data-calculator="character"
  data-version="${version}"
  style="border: 1px solid #2a2a2a;background: #141414;padding: 12px;max-width: 420px;color: #e6e6e6;font-size: 13px;font-family: system-ui, sans-serif;"
>

  <!-- ATTRIBUTES -->
  <div style="margin-bottom: 12px;">
    <div style="font-weight: 600; margin-bottom: 6px;">
      Attributes
    </div>

    <div style="display:flex; align-items:center; margin-bottom:4px;">
      <span style="width:44px; text-align:right; opacity:.8;">STR</span>
      <input
        type="number"
        data-attr="strength"
        value="10"
        style="margin-left:6px; width:60px;"
      >
    </div>

    <div style="display:flex; align-items:center; margin-bottom:4px;">
      <span style="width:44px; text-align:right; opacity:.8;">MND</span>
      <input
        type="number"
        data-attr="mind"
        value="10"
        style="margin-left:6px; width:60px;"
      >
    </div>
    
    <div style="display:flex; align-items:center; margin-bottom:4px;">
      <span style="width:44px; text-align:right; opacity:.8;">DEX</span>
      <input
        type="number"
        data-attr="dexterity"
        value="10"
        style="margin-left:6px; width:60px;"
      >
    </div>

    <div style="display:flex; align-items:center;">
      <span style="width:44px; text-align:right; opacity:.8;">VIT</span>
      <input
        type="number"
        data-attr="vitality"
        value="10"
        style="margin-left:6px; width:60px;"
      >
    </div>
  </div>

  <!-- EQUIPMENT -->
  <div style="margin-bottom: 12px;">
    <div style="font-weight: 600; margin-bottom: 6px;">
      Equipment
    </div>

    <select data-slot="weapon" style="width:100%; margin-bottom:6px;">
      <option value="">— Weapon —</option>
    </select>

    <select data-slot="armor" style="width:100%;">
      <option value="">— Armor —</option>
    </select>
  </div>

  <!-- RESULTS -->
  <div style="border-top:1px solid #2a2a2a; padding-top:8px;">
    <div style="font-weight: 600; margin-bottom: 6px;">
      Results
    </div>

    <div data-result="attack" style="margin-bottom:2px;">
      Attack: —
    </div>
    <div data-result="hp">
      HP: —
    </div>
  </div>

</div>
    `.trim();
  }
};