#*
 * Copyright 2018 LinkedIn Corp.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
*#

<!DOCTYPE html>
<html>
  <head>
    <title>Reportal</title>

    <link href="${context}/reportal/css/bootstrap.min.css" rel="stylesheet">

    <link href="${context}/css/jquery-ui.css" rel="stylesheet">
    <script type="text/javascript" src="${context}/js/jquery/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-1.10.1.custom.js"></script>

    <script type="text/javascript" src="${context}/js/bootstrap.min.js"></script>
    <link href="${context}/css/bootstrap-datetimepicker.css" rel="stylesheet">
    <script type="text/javascript" src="${context}/js/moment.min.js"></script>
    <script type="text/javascript" src="${context}/js/bootstrap-datetimepicker.min.js"></script>

    <link href="${context}/reportal/css/codemirror.css" rel="stylesheet">
    <link href="${context}/reportal/css/solarized.css" rel="stylesheet">
    <script type="text/javascript" src="${context}/reportal/js/codemirror.js"></script>
    <script type="text/javascript" src="${context}/reportal/js/mode/sql/sql.js"></script>
    <script type="text/javascript" src="${context}/reportal/js/mode/pig/pig.js"></script>

    <script type="text/javascript">
      var contextURL = "${context}";
      var startQueries = [
        #if($queries)
          #foreach($query in $queries)
            #set($num = $velocityCount - 1)

            ## Escape the query title and script strings as JavaScript strings before loading them.
            #set($queryTitle = $esc.javascript(${query.title}))
            #set($queryScript = $esc.javascript(${query.script}))
            {
              "num" : "${num}",
              "title" : #if($queryTitle) "$queryTitle" #else "" #end,
              "type" : "${query.type}",
              "script" : #if($queryScript) "$queryScript" #else "" #end
            },
          #end
        #end
      ];
      var startVariables = [
        #if($variables)
          #foreach($variable in $variables)
            #set($num = $velocityCount - 1)
                  {
                    "num" : "${num}",
                    "title" : "${variable.title}",
                    "name" : "${variable.name}",
                  },
          #end
        #end
      ];
    </script>
    <script type="text/javascript" src="${context}/reportal/js/reportal.js"></script>
    <script type="text/javascript" src="${context}/reportal/js/reportal-edit.js"></script>
    <link href="${context}/reportal/css/reportal.css" rel="stylesheet">
  </head>
  <body>
#set($current_page="$viewerName")
#if(!$hideNavigation)
  #parse("azkaban/webapp/servlet/velocity/nav.vm")
#end

#parse("azkaban/viewer/reportal/reportalnavigation.vm")

    <div class="content" style="margin-top: 41px;">
      <div id="box-error">
  #if($errorMsgs)
        <div class="box-error-message">
    #foreach($errorMsg in $errorMsgs)
      #set($num = $velocityCount - 1)

      #if($num > 0)
                    <br/>
      #end

                    $esc.html($errorMsg)
    #end
        </div>
  #else
    #if($error_message != "null")
        <div class="box-error-message">$esc.html($error_message)</div>
    #elseif($success_message != "null")
        <div class="box-success-message">$success_message</div>
    #end
  #end
      </div>
      <div>&nbsp;</div>
      <form method="post" class="form-horizontal">
        <div style="text-align: center;">
          <a class="btn btn-primary" href="${context}/reportal">Reportal Home</a>
#if($projectId)
          <a class="btn btn-info" href="${context}/reportal?view&amp;id=${projectId}">Report History</a>
          <input type="submit" class="btn btn-primary" name="submit" value="Save"/>
          <input type="submit" class="btn btn-success" name="submit" value="Save and Run"/>
#end
        </div>
#set($title = $esc.html($title))
        <div>&nbsp;</div>
        <div class="container">
          <input id="queryNumber" type="hidden" name="queryNumber" value="#if($queryNumber)${queryNumber}#{else}1#end">
          <input id="variableNumber" type="hidden" name="variableNumber" value="#if($variableNumber)${variableNumber}#{else}1#end">
          <fieldset>
            <legend>Report</legend>
            <div class="control-group required">
              <label class="control-label">Title<abbr title="Required" class="required-mark">*</abbr></label>
              <div class="controls"><input type="text" name="title"#if($title) value="$title"#end></div>
            </div>
            <div class="control-group required">
              <label class="control-label">Description<abbr title="Required" class="required-mark">*</abbr></label>
              <div class="controls"><textarea class="span8" name="description">${description}</textarea></div>
            </div>
            <div class="control-group">
              <div class="controls">
                <label class="checkbox">
                  <input name="render-results-as-html" type="checkbox"#if($renderResultsAsHtml) checked#end />Render results as HTML
                </label>
              </div>
            </div>
            <div class="control-group">
              <div class="controls">
                <label class="checkbox">
                  <input id="schedule-options" name="schedule" type="checkbox"#if($schedule) checked#end />Schedule
                </label>
              </div>
            </div>
            <div id="schedule-fields">
              <div class="control-group">
                <label for="schedule-time" class="control-label">Time</label>
                <div id="schedule-time" class="controls">
                  #set($TWELVE=12)
                  #set($ZERO_ZERO="00")
                  <input name="schedule-hour" type="text" maxlength="2" value="#if($scheduleHour && $scheduleHour != "")${scheduleHour}#else$TWELVE#end" style="width:20px;"/>:<input name="schedule-minute" type="text" size="2" maxlength="2" value="#if($scheduleMinute && $scheduleMinute != "")${scheduleMinute}#else$ZERO_ZERO#end" style="width:20px;"/>
                  <select name="schedule-am_pm" style="width:60px;">
                    <option#if($scheduleAmPm=="am") selected#end>am</option>
                    <option#if($scheduleAmPm=="pm") selected#end>pm</option>
                  </select>
                  <select name="schedule-timezone" style="width:70px;">
                    <option#if($scheduleTimeZone==$timezone) selected#end>${timezone}</option>
                    <option#if($scheduleTimeZone=="UTC") selected#end>UTC</option>
                  </select>
                </div>
              </div>
              <div class="control-group">
                <label for="date" class="control-label">Date</label>
                <div id="date" class="controls" style="position: relative">
                  <input type="text" id="schedule-date" name="schedule-date"#if($scheduleDate && $scheduleDate != "") value="$scheduleDate"#end/>
                </div>
              </div>
              <div class="control-group">
                <div class="controls">
                  <label class="checkbox">
                    <input id="schedule-repeat" name="schedule-repeat" type="checkbox"#if($scheduleRepeat) checked#end/>Repeat
                  </label>
                </div>
              </div>
              <div id="schedule-repeat-fields">
                <div class="control-group">
                  <label for="interval" class="control-label">Every</label>
                  <div id="interval" class="controls">
                    #set($ONE=1)
                    <input name="schedule-interval-quantity" type="text" maxlength="2" value="#if($scheduleIntervalQuantity)${scheduleIntervalQuantity}#else$ONE#end" style="width:20px;"/>
                    <select name="schedule-interval" style="width:100px;">
                      <option value="M"#if($scheduleInterval=="M") selected#end>Minute(s)</option>
                      <option value="h"#if($scheduleInterval=="h") selected#end>Hour(s)</option>
                      <option value="d"#if($scheduleInterval=="d") selected#end>Day(s)</option>
                      <option value="w"#if($scheduleInterval=="w") selected#end>Week(s)</option>
                      <option value="m"#if($scheduleInterval=="m") selected#end>Month(s)</option>
                      <option value="y"#if($scheduleInterval=="y") selected#end>Year(s)</option>
                    </select>
                  </div>
                </div>

                <div class="control-group" id='endScheduleId' data-max="$max_allowed_schedule_dates" data-default="$default_schedule_dates">
                  <label for="endSchedule" class="control-label"> <span style="color:#ff1059">End Schedule Time</span> </label>
                  <div id="interval_2" class="controls" style="position: relative">
                    <input type="text" id="end-schedule-date" name="end-schedule-date"#if($endScheduleDate && $endScheduleDate != "") value="$endScheduleDate"#end/>
                  </div>
                  <div id="expireNote" class="controls" data-end="$endScheduleDate">
                  </div>
                </div>
              </div>
            </div>
          </fieldset>
          <fieldset>
            <div id="variable-fields">
              <legend>Variables</legend>
              <ol id="variable-list" class="reportal-list">
              </ol>
              <ol id="variable-template" style="display:none;">
                <li class="reportal-list-item">
                  <div class="query-actions" style="float: right;">
                    <a class="btn btn-icon btn-left bump-up" title="Move the variable up."><span class="icon icon-arrow-up icon-gray-light icon-medium"></span></a>
                    <a class="btn btn-icon btn-right bump-down disabled" title="Move the variable down."><span class="icon icon-arrow-down icon-gray-light icon-medium"></span></a>
                    <a class="btn btn-danger btn-icon delete" style="float: right; margin-left:5px;" title="Remove">Remove</a>
                  </div>
                  <div class="control-group required">
                    <label class="control-label">Title<abbr title="Required" class="required-mark">*</abbr></label>
                    <div class="controls"><input type="text" class="variabletitle" nametemplate="variable#title" value=""></div>
                  </div>
                  <div class="control-group required">
                    <label class="control-label">Name<abbr title="Required" class="required-mark">*</abbr></label>
                    <div class="controls"><input type="text" class="variablename" nametemplate="variable#name" value=""></div>
                  </div>
                </li>
              </ol>
              <div class="control-group">
                <label class="control-label"></label>
                <div class="controls"><button id="buttonAddVariable" type="button" class="btn btn-success" value="Add another Variable"><span class="icon icon-plus-alt icon-white icon-small"></span>Add Another Variable</button></div>
              </div>
            </div>
          </fieldset>
          <legend>Queries</legend>
          <fieldset>
            <ol id="query-list" class="reportal-list">
            </ol>
            <ol id="query-template" style="display:none;">
              <li class="reportal-list-item">
                <div class="query-actions" style="float: right;">
                  <a class="btn btn-icon btn-left bump-up" title="Move the query up in execution order."><span class="icon icon-arrow-up icon-gray-light icon-medium"></span></a>
                  <a class="btn btn-icon btn-right bump-down disabled" title="Move the query down in execution order."><span class="icon icon-arrow-down icon-gray-light icon-medium"></span></a>
                  <a class="btn btn-danger btn-icon delete" style="float: right; margin-left:5px;" title="Remove">Remove</a>
                </div>
                <div class="control-group">
                  <label class="control-label">Title</label>
                  <div class="controls"><input type="text" class="querytitle" nametemplate="query#title" value="" maxlength="249"></div>
                </div>
                <div class="control-group required">
                  <label class="control-label">Type<abbr title="Required" class="required-mark">*</abbr></label>
                  <div class="controls">
                    <select class="querytype" nametemplate="query#type">
                      <option value="ReportalHive">Hive</option>
                      <option value="ReportalTeraData">Teradata</option>
                      <option value="ReportalPig">Pig</option>
                    </select>
                  </div>
                </div>
                <div class="control-group">
                  <label class="control-label">Script</label>
                  <div class="controls"><textarea class="span8 queryscript" nametemplate="query#script"></textarea></div>
                </div>
              </li>
            </ol>
            <div class="control-group">
              <label class="control-label"></label>
              <div class="controls"><button id="buttonAddQuery" type="button" class="btn btn-success" value="Add another Query"><span class="icon icon-plus-alt icon-white icon-small"></span>Add Another Query</button></div>
            </div>
          </fieldset>
          <fieldset>
            <legend>Access</legend>
            <div class="control-group">
              <label class="control-label">Viewers</label>
              <div class="controls">
                <textarea class="span8" name="access-viewer">$accessViewer</textarea>
                <br/>Separate usernames (e.g.: jdoe) by commas, spaces, or semicolons. If left blank, the runs of this report are viewable by everyone.
              </div>
            </div>
            <div class="control-group">
              <label class="control-label">Executors</label>
              <div class="controls">
                <textarea class="span8" name="access-executor">$accessExecutor</textarea>
                <br/>Separate usernames (e.g.: jdoe) by commas, spaces, or semicolons. If left blank, anyone can execute this report.
              </div>
            </div>
            <div class="control-group">
              <label class="control-label">Owners</label>
              <div class="controls">
                <textarea class="span8" name="access-owner">$accessOwner</textarea>
                <br/>Separate usernames (e.g.: jdoe) by commas, spaces, or semicolons.
              </div>
            </div>
          </fieldset>
          <fieldset>
            <legend>Notification</legend>
            <div class="control-group">
              <label class="control-label">Success Emails</label>
              <div class="controls">
                <textarea class="span8" name="notifications">$notifications</textarea>
                <br/>Separate emails (e.g.: jdoe@example.com) by commas, spaces, or semicolons. Note: If the report returns no results, no email is sent, except for unscheduled runs.
              </div>
            </div>
            <div class="control-group">
              <label class="control-label">Failure Emails</label>
              <div class="controls">
                <textarea class="span8" name="failure-notifications">$failureNotifications</textarea>
                <br/>Separate emails (e.g.: jdoe@example.com) by commas, spaces, or semicolons.
              </div>
            </div>
          </fieldset>
          <div class="form-actions">
            <input type="submit" class="btn btn-primary" name="submit" value="Save">
            <input type="submit" class="btn btn-success" name="submit" value="Save and Run"/>
            <a href="${context}/reportal" class="btn">Cancel</a>
          </div>
        </div>
      </form>
    </div>
  </body>
</html>
