<div class="mh-tooltip-theme">

  <div class="mh-tooltip-header">
    <div class="mh-tooltip-title">
      {{#if (eq activeSystem "city-of-mist")}}
        <div class="mh-theme-name mh-theme-name-com-{{category}}">
          {{themeInfo.locale_name}}
          {{#if crewName}} {{crewName}} {{/if}}
        </div>
      {{/if}}

      {{#if (eq activeSystem "otherscape")}}
        <div class="mh-theme-name mh-theme-name-com-{{category}}">
          {{category}}
          {{#if crewName}} {{crewName}} {{/if}}
        </div>
      {{/if}}

      {{#if (eq activeSystem "legend")}}
        <div class="mh-theme-name mh-theme-name-com-{{category}}">
          {{category}}
          {{#if crewName}} {{crewName}} {{/if}}
        </div>
      {{/if}}

      <div class="mh-resource-bar">
        <!-- Attention Column -->
        <div class="mh-resource-group attention-group">
          <div class="boxes">
            {{#each attention}}
              <span class="mh-box attention {{#if this}}active{{/if}}"></span>
            {{/each}}
          </div>
          <div class="mh-resource-label">{{attentionLabel}}</div>
        </div>

        <!-- Crack Column -->
        <div class="mh-resource-group crack-group">
          <div class="boxes">
            {{#each crack}}
              <span class="mh-box crack {{#if this}}active{{/if}}"></span>
            {{/each}}
          </div>
          <div class="mh-resource-label">{{crackLabel}}</div>
        </div>
      </div>

  </div>

  <hr class="mh-divider">

  <!-- Mystery Display -->
  <span class="mystery-type {{category}}">{{prefix}}:</span>
  <span class="mystery-text">{{mysteryText}}</span>
</div>