{{define "head"}}
    <meta http-equiv="refresh" content="300"/>

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="{{ pathPrefix }}/static/js/bucket.js?v={{ buildVersion }}"></script>
    <script src="{{ pathPrefix }}/static/vendor/moment/moment.min.js?v={{ buildVersion }}"></script>
{{end}}

{{define "content"}}
    <script type="text/javascript">
     var thanos = {
         label: {{.Label}},
         err: {{.Err}},
         refreshedAt: {{.RefreshedAt}},
         blocks: {{.Blocks}}
     };
    </script>

    <div id="err" class="container" style="display: none;">
        <div class="alert alert-warning" role="alert"></div>
    </div>

    <div class="container-fluid" id="Compactions" style="height: 100%; width: 100%;"></div>

    <!--
     TODO(jaseemabid): The legend is only a small temporary workaround till we have better ways of showing the labels.
     See https://github.com/thanos-io/thanos/issues/1246#issuecomment-506681398 for context.
    -->

    <div id="legend" class="container-fluid" style="display: none; padding-top: 50px;">
        <h4> Legend </h4>
        <table class="table table-striped table-hover table-sm">
            <tbody></tbody>
        </table>
    </div>

    <style>
        text[text-anchor=start] {display: none}
        html,body {height: 100%;}
    </style>
{{end}}
