<% content_for :subnav_items do %>
    <%= render 'subnav_item', link_text: 'Status', destination_path: data_export_status_path %>
    <%= render 'subnav_item', link_text: 'Export', destination_path: data_export_export_csv_path %>
<% end %>


<% javascript 'interval_data_graph.js' %>

<div class="form form-horizontal">

    <fieldset class="target-interval-data">

        <div class="fieldset-heading">
            <h3>Status</h3>
        </div>

        <%= fields_for :target do |f| %>

            <!--<div class="col-md-4">-->

                <div class="form-group">
                    <label class="control">
                        Target
                    </label>
                    <div class="control">
                        <%= f.select :target_id, grouped_options_for_select(TargetsHelper.target_options_grouped_by_type, selected: @target_id), {}, { multiple: false, include_blank: false, class: 'form-control chosen-select' } %>
                    </div>
                </div>

                <div class="form-group">
                    <div class="control">
                        <%= f.select(:interval_description_id, @report_interval_descriptions, {}, { id: "report-interval-description-select", class: "form-control graph-source-select" }) %>
                    </div>
                </div>

                <div class="report-graph-controls">

                    <div class="date-controls">
                        <button type="button" value='Decrement Date' onclick="increment_date_by_days(-1);" class="btn btn-primary">Previous Day</button>
                        <input class="form-control" type="text" id="report_date" readonly="readonly" title="report date"/>
                        <button type="button" value='Increment Date' onclick="increment_date_by_days(+1);" class="btn btn-primary">Next Day</button>
                    </div>

                    <div class="hour-controls">
                        <label id="hours-label" for="amount">Hours:</label>
                        <input class="form-control" type="text" id="hours" readonly="readonly" title="hours"/>
                        <div id="hours-slider"></div>
                    </div>
                    
                    <button type="button" value='Generate Graph' onclick="generate_report_intervals_graph();" id="generate-graph" class="btn btn-primary">Refresh Graph</button>

                </div>

            <!--</div>-->

        <% end %>

        <div id="chart">
            <svg height="240" style="background: white;"></svg>
        </div>

    </fieldset>

</div>