<div class="card" data-test-selector="clips-modal-report">
  <div class="text-content">
    <div class="content-header">
      <h4>{{t 'channel.clips.clip.report.menuOption'}}</h4>
      <div class="sub-text">
        <p>
          {{t 'channel.clips.clip.report.confirmation.info'}}
        </p>
        <p class="italic">
          {{t 'channel.clips.clip.report.confirmation.warning'}}
        </p>
      </div>
    </div>
    <div class="form__group item">
      <label for="reason" class="form__label">{{t 'channel.clips.clip.report.confirmation.reason.selectTitle'}}</label>

      <select class="field form__input" id="reason" name="reason" onchange={{action 'updateReason' value='target.value'}}>
        <option value='' selected>{{t 'channel.clips.clip.report.confirmation.reason.select'}}</option>
        {{#each-in reasons as |reasonKey reason|}}
          <option value={{reasonKey}}>{{reason}}</option>
        {{/each-in}}
      </select>
    </div>

    <div class="form__group item">
      <label for="description--reason" class="form__label">
        {{t 'general.forms.description'}} ({{t 'channel.clips.clip.report.confirmation.required'}})
      </label>
      {{textarea id="description--reason" value=description class="form__input" key-up=(action 'checkValidation')}}
    </div>
    <div class="buttons">
      <button class="button button--text" data-test-selector="closeReportModal" {{action 'closeReportModal'}}>
        {{t 'channel.clips.clip.remove.confirmation.cancel'}}
      </button>
      <button class="button" data-test-selector="onReportClip" {{action 'onReportClip'}} disabled={{buttonDisabled}}>
        {{t 'channel.clips.clip.report.confirmation.button'}}
      </button>
    </div>
  </div>
</div>
 
