<%namespace name="jsloader" file="/histogram/jsloader.html"/>
<%namespace name="dochead"  file="/histogram/dochead.html"/>
<%namespace name="header"   file="/common/header.html"/>
<%namespace name="footer"   file="/common/footer.html"/>

${dochead.html("Histogram | " + c.label)}
${header.html()}
<div class="right">
        <a href="javascript:HARSTORAGE.view_preferences()">Result ChartTheme</a>
    </div>    
    <div class="hr"></div>
    <div id="preferences">
        <strong>Theme</strong>        
        <div class="hr"></div>
        <form id="theme-list" action="none">
            <input class="radio" type="radio" name="theme" value="light" />
            <span class="theme-name">Light<br /></span>
            <input class="radio" type="radio" name="theme" value="light-green" />
            <span class="theme-name">Light Green<br /></span>            
            <input class="radio" type="radio" checked="true" name="theme" value="dark-green" />
            <span class="theme-name">Dark Green</span>        
        </form>
        <div class="hr"></div>        
        <button type="button" onclick="javascript:HARSTORAGE.update_preferences();">Apply</button>    
        <div id="close">            
            <a href="javascript:HARSTORAGE.view_preferences()">X</a>        
        </div>    
    </div>
</div>
<center>
    <div class="sp-display">
        <div id="chart"></div>
        <p class="title">Histogram</p>

        <div class="selector">
            <select id="timings" class="chosen-select">
                % for metric, title in c.metrics:
                <option value="${metric}">${title}</option>
                % endfor                
            </select>
        </div>
    </div>
</center>
${jsloader.html()}
${footer.html()}