<%page expression_filter="h"/>
<%namespace name="lib" file="/lib.html" import="get_application_css" />
<!doctype html>
<head>
    <meta charset="utf-8">
    <title>${_('panel editor')}</title>
    <meta name="description" content="${_('panel editor')}">
    <link rel="stylesheet" href="${make_url('/static/css/jquery.ui.selectmenu.css')}" />
    <link rel="stylesheet" href="${make_url('/static/css/view.css')}" />
    <link rel="stylesheet" href="${make_url('/static/css/paneleditor.css')}" />
    <link rel="stylesheet" href="${make_url('/static/css/skins/default/default.css')}" />
    ${lib.get_application_css(app)}
</head>
<body style="padding:0px; margin:0px;">
<!-- robust editor -->
<div class="panels">
    <%
    edit_xml_url = make_url(
        ['manager', app, 'data/ui/views', view_id],
        _qs=dict(
            action='edit',
            url=make_url(['app', app, view_id]),
            redirect_override="/app/%s/%s" % (app, view_id)
        )
    )
    %>
    <% panel_dict = dashboard_panel.get_dict() %>

    <div id="viz-select" class="viz-select">
        <label for="viz-type">${_('Visualizations')}</label>
        <select name="viz-type" id="viz-type" class="viz-type">
            <!-- <optgroup label="${_('Table and events')}"> -->
                <% data_series = [('table', _('Table')), ('event', _('Events'))] %>
                % for data in data_series:
                    % if not is_transforming or data[0] == 'table':
                        <option value="${data[0]}" class="bg-img ${data[0]}">${data[1]|n}</option>
                    % else:
                        <option value="${data[0]}" class="bg-img disabled ${data[0]}" disabled="disabled">${data[1]|n}</option>
                    % endif
                % endfor
            <!-- </optgroup> -->

            <!-- <optgroup label="${_('Data series visualizations')}"> -->
                <% data_series = [('bar', _('Bar')), ('area', _('Area')), ('column', _('Column')),
                    ('pie', _('Pie')), ('scatter', _('Scatter')), ('line', _('Line'))] %>
                % for data in data_series:
                    % if is_transforming:
                        <option value="${data[0]}" class="bg-img ${data[0]}">${data[1]|n}</option>
                    % else:
                        <option value="${data[0]}" class="bg-img disabled ${data[0]}" disabled="disabled">${data[1]|n}</option>
                    % endif
                % endfor
            <!-- </optgroup> -->

            <!-- <optgroup label="${_('Single value visualizations')}"> -->
                <% data_series = [('single', _('Single Value')), ('radialGauge', _('Radial Gauge')),
                    ('fillerGauge', _('Filler Gauge')), ('markerGauge', _('Marker Gauge'))] %>
                % for data in data_series:
                    % if is_transforming:
                        <option value="${data[0]}" class="bg-img ${data[0]}">${data[1]|n}</option>
                    % else:
                        <option value="${data[0]}" class="bg-img disabled ${data[0]}" disabled="disabled">${data[1]|n}</option>
                    % endif
                % endfor
            <!-- </optgroup> -->
        </select>
        <a href="${generateSelfHelpLink('learnmore.paneleditor.viztype')}" target="_blank" title="${_('Splunk help')}" class="spl-external-link spl-icon-external-link-xsm">${_("Learn More")}</a>
    </div><!-- /#viz-select -->

    <div class="tabs">
        <ul>
            <li class="active">
                <h1><a href="#general">${_('General')}</a><span>&raquo;</span></h1>
            </li>
            <li>
                <h1><a href="#ranges">${_('Color ranges')}</a><span>&raquo;</span></h1>
            </li>
            <li>
                <h1><a href="#xaxis">${_('X Axis')}</a><span>&raquo;</span></h1>
            </li>
            <li>
                <h1><a href="#yaxis">${_('Y Axis')}</a><span>&raquo;</span></h1>
            </li>
            <li>
                <h1><a href="#legend">${_('Legend')}</a><span>&raquo;</span></h1>
            </li>
        </ul>
    </div><!-- /.tabs -->

    <div class="wrapper">
        <div class="section section-on" id="general">
            <table>
                <tr id="properties" class="row-panel_title">
                    <td colspan="2" class="col-2">
                        <div class="invalidviz">
                            ${_('This visualization is not appropriate for the results returned by the search. <a href="%s" class="spl-external-link spl-icon-external-link-xsm" target="_blank">Learn more</a>' % generateSelfHelpLink("learnmore.visualization.search")) | n}
                        </div>
                        <label for="title" title="${_('Panel title')}" class="block">${_('Panel title')}</label>
                        <textarea id="title" title="${_('Panel title')}"></textarea>
                    </td>
                </tr>
                <tr id="data" class="row-stack_mode">
                    <td class="col-1"><label for="stack" title="${_('Display stacked data series to compare data distributions.')}">${_('Stack mode')}</label></td>
                    <td>
                        <div class="controls splRadio splRadio-group">
                            <span class="splRadio-control splRadio-icon l-first">
                                <input type="radio" name="stack" id="stack-off" value="default" />
                                <label for="stack-off" class="stack-off" title="${_('not stacked')}">${_('not stacked')}</label>
                            </span>
                            <span class="splRadio-control splRadio-icon">
                                <input type="radio" name="stack" id="stacked" value="stacked" />
                                <label for="stacked" class="stack-on" title="${_('stacked')}">${_('stacked')}</label>
                            </span>
                            <span class="splRadio-control splRadio-icon l-last">
                                <input type="radio" name="stack" id="stacked100" value="stacked100" />
                                <label for="stacked100" class="stack-100" title="${_('stacked 100%')}">${_('stacked 100%')}</label>
                            </span>
                        </div>
                    </td>
                </tr>
                <tr class="row-null_value">
                    <td class="col-1"><label for="nullvalues" title="${_('Tell Splunk how to handle null values in line and area charts.')}">${_('Null value')}</label></td>
                    <td>
                        <div class="controls splRadio splRadio-group">
                            <span class="splRadio-control splRadio-icon l-first ">
                                <label for="gaps" class="null-gaps" title="${_('gaps')}">${_('gaps')}</label>
                                <input type="radio" name="nullvalues" value="gaps" id="gaps">
                            </span>
                            <span class="splRadio-control splRadio-icon">
                                <label for="zero" class="null-zero" title="${_('zero')}">${_('zero')}</label>
                                <input type="radio" name="nullvalues" value="zero" id="zero">
                            </span>
                            <span class="splRadio-control splRadio-icon l-last">
                                <label for="connect" class="null-connect" title="${_('connect')}">${_('connect')}</label>
                                <input type="radio" name="nullvalues" value="connect" id="connect">
                            </span>
                        </div>
                    </td>
                </tr>
               <tr class="row-drilldown">
                    <td class="col-1"><label for="drilldown" title="${_('Determine whether users can click to drill down on table rows or cells.')}">${_('Drilldown')}</label></td>
                    <td>
                       <div class="controls splRadio splRadio-group">
                            <span class="splRadio-control l-first ">
                                <label for="drilldown-row" class="drilldown-row" title="${_('Row')}">${_('Row')}</label>
                                <input type="radio" name="drilldown" value="row" id="drilldown-row">
                            </span>
                            <span class="splRadio-control">
                                <label for="drilldown-all" class="drilldown-all" title="${_('Cell')}">${_('Cell')}</label>
                                <input type="radio" name="drilldown" value="all" id="drilldown-all">
                            </span>
                            <span class="splRadio-control l-last">
                                <label for="drilldown-off" class="drilldown-none" title="${_('Off')}">${_('Off')}</label>
                                <input type="radio" name="drilldown" value="none" id="drilldown-off">
                            </span>
                        </div>
                    </td>
                </tr>
                 <tr class="row-drilldown_chart">
                    <td class="col-1"><label for="drilldowncharton" title="${_('Determine whether users can click to drill down on chart details.')}">${_('Drilldown')}</label></td>
                    <td>
                        <div class="controls splRadio splRadio-group twocell">
                            <span class="splRadio-control l-first">
                                <label for="drilldowncharton" class="drilldown-chart-on" title="${_('Yes')}">${_('Yes')}</label>
                                <input type="radio" name="drilldownchart" id="drilldowncharton" value="all" />
                            </span>
                            <span class="splRadio-control l-last">
                                <label for="drilldownchartoff" class="drilldown-chart-off" title="${_('No')}">${_('No')}</label>
                                <input type="radio" name="drilldownchart" id="drilldownchartoff" value="none" />
                            </span>
                        </div>
                    </td>
                </tr>
                <tr class="row-count">
                    <td class="col-1"><label for="count" title="${_('Determine how many table rows are displayed.')}">${_('Count')}</label></td>
                    <td>
                        <div class="controls">
                        <select name="count" id="count">
                            <option value="10">${_('10')}</option>
                            <option value="20">${_('20')}</option>
                            <option value="50">${_('50')}</option>
                        </select>
                        </div>
                    </td>
                </tr>
                <tr class="row-row_numbers">
                    <td class="col-1"><label for="displayrownumbers" title="${_('Determine whether row numbers appear for event lists.')}">${_('Row numbers')}</label></td>
                    <td>
                        <div class="controls splRadio splRadio-group twocell">
                            <span class="splRadio-control l-first">
                                <label for="displayrownumberson" class="display-row-numbers-on" title="${_('Yes')}">${_('Yes')}</label>
                                <input type="radio" name="displayrownumbers" id="displayrownumberson" value="true" />
                            </span>
                            <span class="splRadio-control l-last">
                                <label for="displayrownumbersoff" class="display-row-numbers-off" title="${_('No')}">${_('No')}</label>
                                <input type="radio" name="displayrownumbers" id="displayrownumbersoff" value="false" />
                            </span>
                        </div>
                    </td>
                </tr>
                <tr class="row-dataoverlaymode">
                    <td class="col-1"><label for="dataoverlaymode" title="${_('Overlay a heat map or high/low value indicators onto your table.')}">${_('Data overlay')}</label></td>
                    <td>
                        <div class="controls">
                            <select name=dataoverlaymode id="dataoverlaymode">
                                <option value="none">${_('None')}</option>
                                <option value="heatmap">${_('Heat map')}</option>
                                <option value="highlow">${_('High and low values')}</option>
                            </select>
                        </div>

                    </td>
                </tr>
                <tr class="row-wrap_results">
                    <td class="col-1"><label for="wrap" title="${_('Determine whether event listings wrap to fit within the panel borders.')}">${_('Wrap results')}</label></td>
                    <td>
                        <div class="controls splRadio splRadio-group twocell">
                            <span class="splRadio-control l-first">
                                <label for="wrapon" class="wrap-yes" title="${_('Yes')}">${_('Yes')}</label>
                                <input type="radio" name="wrap" id="wrapon" value="true" />
                            </span>
                            <span class="splRadio-control l-last">
                                <label for="wrapoff" class="wrap-no" title="${_('No')}">${_('No')}</label>
                                <input type="radio" name="wrap" id="wrapoff" value="false" />
                            </span>
                        </div>
                    </td>
                </tr>
                <tr class="row-gauge_style">
                    <td class="col-1"><label for="gaugestyle" title="${_('Determine whether gauges appear shiny or minimal.')}">${_('Style')}</label></td>
                    <td>
                        <div class="controls splRadio splRadio-group twocell">
                            <span class="splRadio-control l-first ">
                                <label for="gaugestyleminimal" class="gauge-minimal" title="${_('Minimal')}">${_('Minimal')}</label>
                                <input type="radio" name="gaugestyle" id="gaugestyleminimal" value="minimal" />
                            </span>
                            <span class="splRadio-control l-last">
                                <label for="gaugestyleshiny" class="gauge-shiny" title="${_('Shiny')}">${_('Shiny')}</label>
                                <input type="radio" name="gaugestyle" id="gaugestyleshiny" value="shiny" />
                            </span>
                        </div>
                    </td>
                </tr>
                <tr class="row-single-value-before">
                    <td colspan="2" class="col-2">
                        <label for="singlevaluebefore" title="${_('Before label' )}" class="block">${_('Before label')}</label>
                        <textarea name="singlevaluebefore" id="singlevaluebefore"></textarea>
                    </td>
                </tr>
                <tr class="row-single-value-after">
                    <td colspan="2" class="col-2">
                        <label for="singlevalueafter" title="${_('After label')}" class="block">${_('After label')}</label>
                        <textarea name="singlevalueafter" id="singlevalueafter"></textarea>
                    </td>
                </tr>
                <tr class="row-single-value-under">
                    <td colspan="2" class="col-2">
                        <label for="singlevalueunder" title="${_('Under label' )}" class="block">${_('Under label')}</label>
                        <textarea name="singlevalueunder" id="singlevalueunder"></textarea>
                    </td>
                </tr>
            </table>
<!--             <p class="edit-xml">${_("Can't find the setting you are looking for?")} <a href="${edit_xml_url}" onclick="window.parent.location=this.href;" class="spl-external-link spl-icon-external-link-xsm" title="directly edit the xml">${_('Click here to edit the XML')}</a></p> -->
       </div><!-- /#general.section -->

       <div class="section" id="xaxis">
            <table>
                <tr class="row-x_axis_title">
                    <td colspan="2" class="col-2">
                        <label for="xaxistitle" title="${_('Axis title')}" class="block">${_('X Axis title')}</label>
                        <textarea name="xaxistitle" id="xaxistitle"></textarea>
                    </td>
                </tr>
            </table>
        </div><!-- /#xaxis.section -->

        <div class="section" id="yaxis">
            <table>
                <tr class="row-y_axis_title">
                    <td colspan="2" class="col-2">
                        <label for="yaxistitle" title="${_('Axis title')}" class="block">${_('Y Axis title')}</label>
                        <textarea name="yaxistitle" id="yaxistitle"></textarea>
                    </td>
                </tr>
                <tr class="row-y_axis_unit">
                    <td class="col-1">
                        <label for="yaxismajorunit" title="${_('Set a specific numeric unit for the Y-axis tick marks.')}">${_('Major Unit')}</label>
                    </td>
                    <td>
                        <div class="controls">
                        <input type="text" name="yaxismajorunit" id="yaxismajorunit" class="numeric"/>
                        </div>
                    </td>
                </tr>
                <tr class="row-y_axis_scale">
                    <td class="col-1">
                        <label for="unitscalelinear" title="${_('Toggle between a linear and logarithmic Y-axis range.')}">${_('Unit Scale')}</label>
                    </td>
                    <td>
                        <div class="controls splRadio splRadio-group twocell">
                            <span class="splRadio-control l-first">
                                <label for="unitscalelinear" class="unit-scale-linear" title="${_('Linear')}">${_('Linear')}</label>
                                <input type="radio" name="unitscale" id="unitscalelinear" value="linear" />
                            </span>
                            <span class="splRadio-control l-last">
                                <label for="unitscalelog" class="unit-scale-log" title="${_('Log')}">${_('Log')}</label>
                                <input type="radio" name="unitscale" id="unitscalelog" value="log" />
                            </span>
                        </div>
                    </td>
                </tr>
                <tr class="row-y_axis_min">
                    <td class="col-1">
                        <label for="yaxisminvalue" title="${_('Set a specific numeric minimal value for the Y-axis.')}">${_('Min Value')}</label>
                    </td>
                    <td>
                        <div class="controls">
                        <input type="text" name="yaxisminvalue" id="yaxisminvalue" class="numeric" />
                        </div>
                    </td>
                </tr>
                <tr class="row-y_axis_max">
                    <td class="col-1">
                        <label for="yaxismaxvalue" title="${_('Set a specific numeric maximum value for the Y-axis.')}">${_('Max Value')}</label>
                    </td>
                    <td>
                        <div class="controls">
                        <input type="text" name="yaxismaxvalue" id="yaxismaxvalue" class="numeric" />
                        </div>
                    </td>
                </tr>
            </table>
        </div><!-- /#yaxis.section -->

        <div id="ranges" class="section">
           <table>
               <tr id="colors">
                   <td colspan="2">
	                   <div class="controls splRadio splRadio-group twocell">
	                        <span class="splRadio-control l-first ">
	                            <label for="rangemodeautomatic" class="rangemode-automatic" title="${_('Automatic')}">${_('Automatic')}</label>
	                            <input type="radio" name="rangeselectmode" id="rangemodeautomatic" value="automatic" />
	                        </span>
	                        <span class="splRadio-control l-last">
	                            <label for="rangemodemanual" class="rangemode-manual" title="${_('Manual')}">${_('Manual')}</label>
	                            <input type="radio" name="rangeselectmode" id="rangemodemanual" value="manual" />
	                        </span>
	                    </div>
                   </td>
               </tr>
               <tr  class="row-color_ranges">
                   <td colspan="2" class="gauge-color-picker">
                       <div id="gaugecolorpicker" style="display: none;">
                           <!-- This element is the first range selection, which is always present -->
                           <div class="rangeselect firstrange">
                               <label class="from">${_('from')}
                                   <input type="text" name="rangestart" size="10" class="range-start" />
                               </label>

                               <label class="to ">${_('to')}
                                   <input type="text" name="rangeend" size="10" class="range-end" />
                               </label>
                               <div class="rangecolorpicker">
                                   <div></div>
                               </div>
                           </div>
	                       <!-- This template div will be cloned each time a new range selection is added,
	                            its class will then be changed to "rangeselect", so external CSS styling should
	                            refer to that class instead of "rangeselecttemplate" -->
	                       <div class="rangeselecttemplate" style="display:none;">
	                           <label class="to">${_('up to')}
	                               <input type="text" name="rangeend" size="10" class="range-end" />
	                           </label>
	                           <div class="rangecolorpicker">
	                               <div></div>
	                           </div>
	                           <a class="splButton-secondary removebutton" href="#" title="${_('remove')}"><span class="splButtonIcon">${_('X')}</span></a>
	                       </div>
	                       <div class="addnewholder" style="display:none;">
	                           <a class="splButton-secondary addnewbutton" href="#" title="${_('Add New')}"><span class="splButtonIcon"></span><span>${_('Add New')}</span></a>
	                       </div>
                       </div>
                       <div id="automatic-mode-message" style="display: none;">
                           <p>
                               ${_("In automatic mode, Splunk uses the panel's base search to determine the size of gauge color ranges.")}
                           </p>
                           <p>
                               ${_('Switch to manual mode to specify custom ranges and colors.')}
                           </p>
                           <a href="${generateSelfHelpLink('learnmore.paneleditor.gaugecolor')}" target="_blank" class="spl-external-link spl-icon-external-link-xsm" title="TODO: what should this say?">${_('Learn More')}</a>
                       </div>
                   </td>
               </tr>
          </table>
      </div><!-- /#ranges.section -->

      <div id="legend" class="section">
          <table>
              <tr class="row-legend_position">
                  <td class="col-1"><label for="legendposition" title="${_('Determine where in the panel a chart legend is displayed.')}">${_('Position')}</label></td>
                  <td>
                      <div class="controls">
                          <select name="legendposition" id="legendposition">
                              <option value="bottom">${_('bottom')}</option>
                              <option value="left">${_('left')}</option>
                              <option value="top">${_('top')}</option>
                              <option value="right">${_('right')}</option>
                              <option value="none">${_('none')}</option>
                          </select>
                      </div>
                  </td>
              </tr>
              <tr class="row-legend_truncation">
                  <td class="col-1"><label for="legendtruncation" title="${_('Determine how overlong legend labels are truncated.')}">${_('Truncation')}</label></td>
                  <td>
                      <div class="controls splRadio splRadio-group">
                          <span class="splRadio-control splRadio-icon l-first ">
                              <label for="ellipsis-start" class="ellipsis-start" title="${_('start')}">${_('start')}</label>
                              <input type="radio" name="legendtruncation" value="ellipsisEnd" id="ellipsis-start" />
                          </span>
                          <span class="splRadio-control splRadio-icon" >
                              <label for="ellipsis-middle" class="ellipsis-middle" title="${_('middle')}">${_('middle')}</label>
                              <input type="radio" name="legendtruncation" value="ellipsisMiddle" id="ellipsis-middle" />
                          </span>
                          <span class="splRadio-control splRadio-icon l-last">
                              <label for="ellipsis-end" class="ellipsis-end" title="${_('end')}">${_('end')}</label>
                              <input type="radio" name="legendtruncation" value="default" id="ellipsis-end" />
                          </span>
                      </div>
                  </td>
              </tr>
          </table>
      </div><!-- /#legend.section -->

    </div><!-- /.wrapper -->

    <ul class="splClearfix buttons">
        <li class="item-1"><a href="${make_url(['panels', app, 'show', dashboard_panel.id[1][0], dashboard_panel.id[1][1]], _qs=dict(id=dashboard_panel.id[0]))}" class="splButton-secondary cancel" tabindex="3">${_('Cancel')}</a></li>
        <li class="item-2"><button class="splButton-primary" type="submit"><span>${_('Save')}</span></button></li>
    </ul>

</div><!-- /.panels -->

## hard-coding the swatch colors for now
<%
    swatch_colors = ["#7e9f44", "#ebe42d", "#d13b3b", "#6cb8ca", "#f7912c", "#956e96",
        "#c2da8a", "#fac61d", "#ebb7d0", "#324969", "#d85e3d", "#a04558"];
%>

<!-- This element will be used to create the swatch selection dialog -->
<div id="swatch-dialog" style="display: none;">
    <div class="dialog-body">
        <ul class="swatch-holder">

            % for color in swatch_colors:
                <li class="swatch" data-color="${color}" style="background-color: ${color}"></li>
            % endfor

        </ul>
        <div class="feedback-holder">
            <div class="selected-color"></div>
            <div class="selected-hexcode input-facade">
                <span class="hex">#</span>
                <input type="text" name="input-color" class="input-color input-hide" size="6" maxlength="6" />
            </div>
        </div>
        <div style="clear:both"></div>
    </div>
    <div class="dialog-footer">
        <a href="#" class="cancel-button">${_('Cancel')}</a>
        <a href="#" class="apply-button">${_('Apply')}</a>
        <div style="clear:both"></div>
    </div>
</div>

<script src="${make_url('/config?autoload=1')}" crossorigin="use-credentials"></script>
<script src="${make_url('/static/js/contrib/json2.js')}"></script>
<script src="${make_url('/static/js/contrib/deprecated/jquery-1.8.3.js')}"></script>
<script src="${make_url('/static/js/contrib/deprecated/jquery-ui-1.9.0.min.js')}"></script>
<script src="${make_url('/static/js/contrib/jquery.ui.selectmenu.js')}"></script>
<script src="${make_url('/static/js/contrib/jquery.cookie.js')}"></script>
<script src="${make_url('/static/js/contrib/jquery.bgiframe.min.js')}"></script>
<script src="${make_url('/static/js/i18n.js')}"></script>
<script src="${make_url('/static/js/splunk.js')}"></script>
<script src="${make_url('/static/js/util.js')}"></script>
<script src="${make_url('/static/js/splunk.jquery.csrf_protection.js')}"></script>
<script src="${make_url('/static/js/splunk.jquery.radio.js')}"></script>
<script src="${make_url('/static/js/paneleditor.js')}"></script>
<script>
//start the program
var app = new paneleditor.ApplicationController(paneleditor.schemas, ${json_decode(cherrypy.session.id)|n},
    '${make_url(['paneleditor', app, 'update', dashboard_panel.id[1][0], dashboard_panel.id[1][1]], _qs=dict(id=dashboard_panel.id[0]))|n}',
    ${json_decode(panel_dict) | n}, {enableFragmentID: ${'true' if enable_fragment_id else 'false' | n}});
</script>
</body>
</html>
