soc/iris-web/source/app/blueprints/pages/alerts/templates/modal_escala...

<div class="modal" id="escalateModal" tabindex="-1" role="dialog" aria-labelledby="escalateModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="escalateModalLabel"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <div class="form-group row" id="modalAlertTitleContainer">
            <div class="col">
                <label for="modalAlertTitle">Alert title</label>
                <input type="text" class="form-control" id="modalAlertTitle" readonly>
            </div>
          </div>

            <div class="form-group">
              <label class="form-label">Merge options</label><br/>
              <div class="selectgroup ml-auto mr-auto">

                <label class="selectgroup-item">
                  <input type="radio" name="mergeOption" value="new_case" class="selectgroup-input" checked>
                  <span class="selectgroup-button">Merge into a new case</span>
                </label>

                <label class="selectgroup-item">
                  <input type="radio" name="mergeOption" value="existing_case" class="selectgroup-input">
                  <span class="selectgroup-button">Merge into existing case</span>
                </label>

              </div>
            </div>

          <div class="form-group"><span id="escalateModalExplanation"></span></div>
          <div class="form-group" id="modalEscalateCaseTitleContainer" style="display:none;">
              <label>New case title *</label>
             <input type="text" class="form-control" id="modalEscalateCaseTitle" name="new_case_title">
          </div>

         <div class="form-group" id="mergeAlertCaseSelectSection" style="display:none;">
             <label for="mergeAlertCaseSelect">Select case to merge into *</label>
            <select class="selectpicker form-control" data-dropup-auto="false" data-live-search="true" id="mergeAlertCaseSelect">
            </select>
         </div>
         <div class="form-group" id="mergeAlertCaseTemplateSection">
             <label for="mergeAlertCaseTemplate">Select case template</label>
            <select class="selectpicker form-control" data-dropup-auto="false" data-live-search="true" id="mergeAlertCaseTemplateSelect">
            </select>
          </div>
          <div class="form-group mt-4" id="ioc-container" style="display:none;">
            <label>IOCs to import</label>
            <button type="button" class="btn btn-sm btn-light ml-2 float-right" id="toggle-iocs">Deselect All</button>
            <div class="form-control" id="ioCsList" style="height: auto; overflow-y: scroll; max-height: 150px;"></div>
          </div>
          <div class="form-group mt-4" id="asset-container" style="display:none;">
            <label>Assets to import</label>
            <button type="button" class="btn btn-sm btn-light ml-2 float-right" id="toggle-assets">Deselect All</button>
            <div class="form-control" id="assetsList" style="height: auto; overflow-y: scroll; max-height: 150px;"></div>
          </div>
          <div class="form-group mt-4">
            <label for="note">Escalation note</label>
            <textarea class="form-control" id="note" rows="3"></textarea>
          </div>
          <div class="form-group">
            <label for="case_tags">Case tags</label>
            <input type="text" id="case_tags"
                class="form-control col-md-12"/>
          </div>
          <div class="col-md-3 form-group">
                <div class="form-check">
                    <label class="form-check-label mt-3">
                        <input checked="" class="form-check-input" id="importAsEvent" name="import_as_event" type="checkbox" value="y">
                        <span class="form-check-sign"> Add alert as event in the timeline
                        </span>
                    </label>
                </div>
            </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-dark" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="escalateOrMergeButton">Merge</button>
      </div>
    </div>
  </div>
</div>