<div class="tab domains sheet-part {{#if @root.tabs.domains.active}}active{{/if}}" data-group="sheet" data-tab="domains">
  <section class="community-section">
    <h3>{{ localize 'COMMUNITY.size_title' }}</h3>
    <div class="flexrow community-size">
      <div class="form-group" style="flex: 1;">
        <label for="system.size.value">{{ localize 'COMMUNITY.size_label' }}</label>
        {{#if isEditMode}}
        <select name="system.size.value" data-dtype="Number">
          {{#each sizeOptions as |cfg level|}}
          <option value="{{ level }}" {{#ife @root.system.size.value level}}selected{{/ife}}>{{ localize cfg.label }}</option>
          {{/each}}
        </select>
        {{else}}
        <span>{{ sizeLabel }}</span>
        {{/if}}
      </div>
      <div class="form-group" style="flex: 1;">
        <label for="system.population">{{ localize 'COMMUNITY.population' }}</label>
        {{#if isEditMode}}
        <input type="number" name="system.population" value="{{system.population}}" data-dtype="Number" min="0" />
        {{else}}
        <span>{{system.population}}</span>
        {{/if}}
      </div>
    </div>
    {{#if sizeInfo}}
    <p class="community-size-info">
      {{ localize 'COMMUNITY.population_range' }}: <strong>{{ sizeInfo.population }}</strong> ·
      {{ localize 'COMMUNITY.figures' }}: <strong>{{ sizeInfo.figures }}+</strong> ·
      {{ localize 'COMMUNITY.companies' }}: <strong>{{ sizeInfo.companies }}+</strong>
    </p>
    {{/if}}
  </section>

  {{#each domains}}
  <section class="community-section">
    <h3>{{ this.label }}</h3>
    <div class="grid grid-2col">
      {{#each this.sections}}
      <div class="gauge {{ this.state }}">
        <label for="system.domains.{{ this.domainKey }}.{{ this.key }}.value">{{ this.label }}</label>
        {{#if @root.isEditMode}}
        <input type="number" name="system.domains.{{ this.domainKey }}.{{ this.key }}.value"
          value="{{ this.gauge.value }}" data-dtype="Number" min="0" />
        {{else}}
        <span class="gauge-value">{{ this.gauge.value }}D</span>
        {{/if}}
        <span class="gauge-state {{ this.state }}">{{ this.stateLabel }}</span>
      </div>
      {{/each}}
    </div>
  </section>
  {{/each}}
</div>
