<form>
  <div class="modal-head">
    {{#if change}}
      <h2>{{t 'coding_rules.update_custom_rule'}}</h2>
    {{else}}
      <h2>{{t 'coding_rules.create_custom_rule'}}</h2>
    {{/if}}
  </div>

  <div class="modal-body modal-container">
    <div class="js-modal-messages"></div>

    <table>
      <tr class="property">
        <th class="nowrap"><h3>{{t 'name'}} <em class="mandatory">*</em></h3></th>
        <td>
          <input type="text" name="name" id="coding-rules-custom-rule-creation-name"
            class="coding-rules-name-key" value="{{name}}"/>
        </td>
      </tr>
      <tr class="property">
        <th class="nowrap"><h3>{{t 'key'}}{{#unless change}} <em class="mandatory">*</em>{{/unless}}</h3></th>
        <td>
          {{#if change}}
            <span class="coding-rules-detail-custom-rule-key" title="{{key}}">{{key}}</span>
          {{else}}
            <input type="text" name="key" id="coding-rules-custom-rule-creation-key"
              class="coding-rules-name-key" value="{{internalKey}}"/>
          {{/if}}
        </td>
      </tr>
      <tr class="property">
        <th class="nowrap"><h3>{{t 'description'}} <em class="mandatory">*</em></h3></th>
        <td>
          <textarea name="markdown_description" id="coding-rules-custom-rule-creation-html-description"
            class="coding-rules-markdown-description" rows="15">{{{mdDesc}}}</textarea>
          <span class="text-right">{{> '_markdown-tips' }}</span>
        </td>
      </tr>
      <tr class="property">
        <th class="nowrap"><h3>{{t 'severity'}}</h3></th>
        <td>
          <select id="coding-rules-custom-rule-creation-severity">
            {{#each severities}}
              <option value="{{this}}">{{t 'severity' this}}</option>
            {{/each}}
          </select>
        </td>
      </tr>
      <tr class="property">
        <th class="nowrap"><h3>{{t 'coding_rules.filters.status'}}</h3></th>
        <td>
          <select id="coding-rules-custom-rule-creation-status">
            {{#each statuses}}
              <option value="{{id}}">{{text}}</option>
            {{/each}}
          </select>
        </td>
      </tr>
      {{#each params}}
        <tr class="property">
          <th class="nowrap"><h3>{{key}}</h3></th>
          <td>
            {{#eq type 'TEXT'}}
              <textarea class="width100" rows="3" name="{{key}}" placeholder="{{defaultValue}}">{{value}}</textarea>
            {{else}}
              <input type="text" name="{{key}}" value="{{value}}" placeholder="{{defaultValue}}"/>
            {{/eq}}
            <div class="note">{{htmlDesc}}</div>
            {{#if extra}}
              <div class="note">{{extra}}</div>
            {{/if}}
          </td>
        </tr>
      {{/each}}
    </table>
  </div>

  <div class="modal-foot">
    <button id="coding-rules-custom-rule-creation-create">
      {{#if change}}{{t 'save'}}{{else}}{{t 'create'}}{{/if}}
    </button>
    <button id="coding-rules-custom-rule-creation-reactivate" class="hidden">{{t 'coding_rules.reactivate'}}</button>
    <a id="coding-rules-custom-rule-creation-cancel">{{t 'cancel'}}</a>
  </div>
</form>
