---
layout: base
description: Template for S3 bucket navigation
---

<link rel="stylesheet" href="{{ '/assets/css/calendar-heatmap.css' | relative_url }}">
<style>
  #coverage { height: 200px; }
</style>

<div class="row">
  <div class="col-lg-4">
    <!-- TODO: dynamic -->
    <h3>bejab</h3>
    <p><code>bejab</code> is a radar located in Jabbeke, Belgium at <a href="#">51.1919, 3.0641</a>.</p>

    <div class="accordion accordion-flush" id="accordionExample">
      <div class="accordion-item">
        <div class="accordion-header" id="headingOne">
          <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            Data coverage
          </button>
        </div>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
          <div class="accordion-body">

            <div id="coverage">
              <div id="heatmap">
                <p>Browse to a year directory to see file coverage.</p>
              </div>
            </div>

          </div>
        </div>
      </div>
      <div class="accordion-item">
        <div class="accordion-header" id="headingTwo">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            Visualize
          </button>
        </div>
        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
          <div class="accordion-body">
            
            <a class="btn btn-secondary" href="#">Visualize data</a>

          </div>
        </div>
      </div>
      <div class="accordion-item">
        <div class="accordion-header" id="headingThree">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
            Download with bioRad
          </button>
        </div>
        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
          <div class="accordion-body">
            
            <pre>
download_vp_files(
  radar = "bejab",
  start = "2020",
  end = "2021"
)
            </pre>

          </div>
        </div>
      </div>

      <div class="accordion-item">
        <div class="accordion-header" id="headingFour">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
            Download with AWS S3 CLI
          </button>
        </div>
        <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
          <div class="accordion-body">
            
            <pre>
aws cli sync s3://...
            </pre>

          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-lg-8 order-lg-first">

    {{ content}}

    <div id="breadcrumbs"></div>
    <div id="listing"></div>
  </div>
</div>

<!-- <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script type="text/javascript" src="{{ '/assets/js/calendar-heatmap.js' | relative_url }}"></script>
    
<script type="text/javascript">
  var S3BL_IGNORE_PATH = true;
  // var BUCKET_NAME = 'BUCKET';
  var BUCKET_URL = 'https://lw-enram.s3-eu-west-1.amazonaws.com';
  // var S3B_ROOT_DIR = 'SUBDIR_L1/SUBDIR_L2/';
  var S3B_SORT = 'A2Z';
</script>
<script type="text/javascript" src="{{ '/assets/js/list.js' | relative_url }}"></script>
<script type="text/javascript" src="{{ '/assets/js/app.js' | relative_url }}"></script>