<div class="row" id="createCampaignDiv">

  <div style="display:block;">

    <form>
      <div id="screenshotWizard">
        <ol>
          <li>
            Select Audience
          </li>
          <li>
            Session Setting
          </li>
        </ol>
        <!-- begin wizard step-1 -->
        <div>
          <div class="jumbotron m-b-0" style="height:100%;padding-top:5px;background-color:#ffffff !important;">
            <!--  <div ng-include src="'partials/audienceListing.html'"></div> -->
            <div class="row">
              <div class="audience-segment-title col-xs-8" style="padding-left: 25px;padding-top: 20px;">Select from Existing Audience Segments</div>
              <div class="col-xs-4 text-right" style="padding-right: 25px;padding-top: 20px;">
                <a href="dashboard?action=aud#/aud/create/true/{{template_id}}/{{templateType}}" ng-if="template_id  && templateType">
                  <button type="button" class="btn btn-primary" style="padding: 8px 14px; font-size: 12px;">Create New Audience Segments</button>
                </a>
                <a href="dashboard?action=aud#/aud/create/true" ng-if="!template_id">
                  <button type="button" class="btn btn-primary" style="padding: 8px 14px; font-size: 12px;">Create New Audience Segments</button>
                </a>
              </div>
            </div>
            <div class="col-12 ui-sortable" style="overflow:auto;height:400px;padding-top:10px;">
              <div class="panel-body">
                <div class="audience-segments-list">
                  <div class="audience-segments" ng-repeat="audList in audienceSegments track by $index" ng-class="(audList._id==audienceSegmentId) ? 'active' : ''"
                    id="segment_{{audList._id}}" ng-click="selectAudienceSegment($index,audList._id);">
                    <input style="display:none;" type="radio" id="{{audList._id}}" name="audiencelist" ng-model="audienceSegmentId" ng-value="audList._id">
                    <div>
                      {{audList.name}}
                      <span class="pull-right">
                        <img src="assets/img/tick.svg" alt="Tick">
                      </span>
                    </div>
                  </div>
                </div>
                <div style="text-align:center;display:none">
                  <button type="button" class="btn btn-sm btn-success" ng-click="cancelCamp();">Cancel</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- end wizard step-2 -->
        <!-- begin wizard step-3 -->
        <div ng-clock>
          <div class="jumbotron m-b-0" style="height:100%;padding-top:5px;overflow:auto;background-color:#ffffff !important;">
            <div class="col-md-12">
              <!--Start col-12-->
              <div class="col-12 ui-sortable">
                <div class="panel-body">
                  <div class="form-horizontal" style="padding-top:25px;">

                    <div class="form-group">
                      <label class="col-md-3 control-label">Setting Name</label>
                      <div class="input-group ">
                        <input type="text" class="form-control" ng-model="screenshotSetups.name" placeholder="Enter session setting name" maxlength="50"
                          style="width: 342px;">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-md-3 control-label">Date Range</label>
                      <div class="input-group input-daterange">
                        <input type="text" class="form-control" name="start" placeholder="Date Start" id="startDate" ng-model="screenshotSetups.startDate"/>
                        <span class="input-group-addon">to</span>
                        <input type="text" class="form-control" name="end" placeholder="Date End" ng-model="screenshotSetups.endDate" id="endDate"/>
                      </div>
                      <div class="input-group" style="margin-left:25%;margin-top:20px;"> 
                        <div class="row">
                          <div class="col-md-6">
                              <button class="btn btn-success right">Cancel</button>                              
                          </div>
                          <div class="col-md-6">
                              <button class="btn btn-success left">Save</button>                              
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!--End panel-body-->
              </div>
              <!--End col-12-->
            </div>
            <!-- end row -->
          </div>
        </div>
        <!-- end wizard step-3 -->
      </div>
    </form>
  </div>
</div>