<header class="page-header">
  <div class="page-title">
    <span class="h3">{{t 'compare'}}</span>
  </div>
</header>

{{#notEmpty profiles}}
  <form class="spacer-bottom" id="quality-profile-comparison-form">
    <label class="text-middle" for="quality-profile-comparison-with-key">With</label>
    <select id="quality-profile-comparison-with-key">
      {{#each profiles}}
        <option value="{{key}}" {{#eq key ../comparedWith}}selected{{/eq}}>{{name}}</option>
      {{/each}}
    </select>
    <button class="text-middle" id="quality-profile-comparison-form-submit">{{t 'compare'}}</button>
  </form>
{{else}}
  <div class="alert alert-info">There is no profiles to compare with.</div>
{{/notEmpty}}

{{#notNull comparison}}
  <table class="width-100 data zebra">
    {{#notEmpty comparison.inLeft}}
      <tr>
        <td class="width-50"><h6>{{tp 'quality_profiles.x_rules_only_in' comparison.inLeftSize}} {{comparison.left.name}}</h6></td>
        <td class="width-50"></td>
      </tr>
      {{#each comparison.inLeft}}
        <tr class="js-comparison-in-left">
          <td class="width-50">{{severityIcon severity}}&nbsp;<a href="{{rulePermalink key}}">{{name}}</a></td>
          <td class="width-50"></td>
        </tr>
      {{/each}}
    {{/notEmpty}}

    {{#notEmpty comparison.inRight}}
      <tr>
        <td class="width-50"></td>
        <td class="width-50"><h6>{{tp 'quality_profiles.x_rules_only_in' comparison.inRightSize}} {{comparison.right.name}}</h6></td>
      </tr>
      {{#each comparison.inRight}}
        <tr class="js-comparison-in-right">
          <td class="width-50"></td>
          <td class="width-50">{{severityIcon severity}}&nbsp;<a href="{{rulePermalink key}}">{{name}}</a></td>
        </tr>
      {{/each}}
    {{/notEmpty}}

    {{#notEmpty comparison.modified}}
      <tr>
        <td class="text-center width-50" colspan="2">
          <h6>{{tp 'quality_profiles.x_rules_have_different_configuration' comparison.modifiedSize}}</h6>
        </td>
      </tr>
      <tr>
        <td class="width-50"><h6>{{comparison.left.name}}</h6></td>
        <td class="width-50"><h6>{{comparison.right.name}}</h6></td>
      </tr>
      {{#each comparison.modified}}
        <tr class="js-comparison-modified">
          <td class="width-50">
            <p>{{severityIcon left.severity}}&nbsp;<a href="{{rulePermalink key}}">{{name}}</a></p>
            {{#notNull left.params}}
              <ul>
                {{#each left.params}}
                  <li class="spacer-top"><code>{{@key}}: {{this}}</code></li>
                {{/each}}
              </ul>
            {{/notNull}}
          </td>
          <td class="width-50">
            <p>{{severityIcon right.severity}}&nbsp;<a href="{{rulePermalink key}}">{{name}}</a></p>
            {{#notNull right.params}}
              <ul>
                {{#each right.params}}
                  <li class="spacer-top"><code>{{@key}}: {{this}}</code></li>
                {{/each}}
              </ul>
            {{/notNull}}
          </td>
        </tr>
      {{/each}}
    {{/notEmpty}}
  </table>
{{/notNull}}
