<?php /* Template Name: Regional Data */ ?>

<?php get_header(); ?>

<?php require get_template_directory() . '/includes/subheader-asiapac.php'; ?>


<div class="container-fluid content-wrapper">
  <div class="row">
    <div class="col-12 page-head">
      <h1 class="display-6">SE Asia Datazdfhgadfgsdgfh</h1>
  </div>

  <div class="row">
    <div class="col-3 sidebar">
      <nav class="nav flex-column">
        <p class="sidebar-heading">MITIGATION ACTIONS</p>
        <a class="nav-link" href="#">Immediate Action</a>
        <a class="nav-link" href="#">Serious Consideration</a>

        <p class="sidebar-heading">DATA TYPES</p>
        <a class="nav-link" href="#">Alert</a>
        <a class="nav-link" href="#">Advisory</a>
        <a class="nav-link" href="#">Development</a>

        <p class="sidebar-heading">ASSESSMENTS</p>
        <a class="nav-link" href="#">Indo Fortnightly</a>
        <a class="nav-link" href="#">Sani / Refactored</a>

        <p class="sidebar-heading">CUSTOM QUERIES</p>
        <a class="nav-link" href="#">Daily Snapshot</a>
        <a class="nav-link" href="#">7-Day Snapshot</a>
        <a class="nav-link" href="#">30-Day Snapshot</a>

        <p class="sidebar-heading">ARCHIVES</p>
        <a class="nav-link" href="#">2022</a>
        <a class="nav-link" href="#">2021</a>
        <a class="nav-link" href="#">2020</a>
      </nav>
    </div>


    <div class="col-9 main-content">
      <div class="hstack stack-head bg-light py-2">
        <div class="p-1 dt-1">TYPE</div>
        <div class="p-1 dt-2">DATE</div>
        <div class="p-1 dt-3">TITLE</div>
        <div class="p-1 ms-auto">ACTIONS</div>
      </div>

<!-- LOOP START -->
      <div class="hstack stack-r1">
        <div class="p-1 dt-1"><span class="badge text-bg-danger me-1">Alert</span>SE-123</div>
        <div class="dt-2">Jan 12 2023</div>
        <div class="p-1 dt-3 fw-semibold">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
        <div class="p-1 ms-auto"><button type="button" class="btn btn-sm btn-outline-primary">Details</button></div>
      </div>
      <div class="hstack stack-r2 pb-1 mb-1">
        <div class="ms-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
      <div class="hstack stack-r3 pb-2 mb-2 border-bottom border-secondary">
        <div class="">
          <p class="impacts text-secondary">
            <span class="fw-semibold">Mitigation Score: </span>10 - Immediate Action
            <span class="px-2">|</span>
            <span class="fw-semibold">Impacts: </span>1200 casualties, 435 deaths, flooding, looting, sniper fire, border disruption</p>
        </div>
      </div>
<!-- LOOP END -->

<!-- LOOP START -->
      <div class="hstack stack-r1">
        <div class="p-1 dt-1"><span class="badge text-bg-warning me-1">Advisory</span>SE-123</div>
        <div class="dt-2">Jan 12 2023</div>
        <div class="p-1 dt-3 fw-semibold">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
        <div class="p-1 ms-auto"><button type="button" class="btn btn-sm btn-outline-primary">Details</button></div>
      </div>
      <div class="hstack stack-r2 pb-1 mb-1">
        <div class="ms-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
      <div class="hstack stack-r3 pb-2 mb-2 border-bottom border-secondary">
        <div class="">
          <p class="impacts text-secondary">
            <span class="fw-semibold">Mitigation Score: </span>10 - Immediate Action
            <span class="px-2">|</span>
            <span class="fw-semibold">Impacts: </span>1200 casualties, 435 deaths, flooding, looting, sniper fire, border disruption</p>
        </div>
      </div>
<!-- LOOP END -->

<!-- LOOP START -->
      <div class="hstack stack-r1">
        <div class="p-1 dt-1"><span class="badge text-bg-secondary me-1">Development</span>SE-123</div>
        <div class="dt-2">Jan 12 2023</div>
        <div class="p-1 dt-3 fw-semibold">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
        <div class="p-1 ms-auto"><button type="button" class="btn btn-sm btn-outline-primary">Details</button></div>
      </div>
      <div class="hstack stack-r2 pb-1 mb-1">
        <div class="ms-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
      <div class="hstack stack-r3 pb-2 mb-2 border-bottom border-secondary">
        <div class="">
          <p class="impacts text-secondary">
            <span class="fw-semibold">Mitigation Score: </span>10 - Immediate Action
            <span class="px-2">|</span>
            <span class="fw-semibold">Impacts: </span>1200 casualties, 435 deaths, flooding, looting, sniper fire, border disruption</p>
        </div>
      </div>
<!-- LOOP END -->



      </div>
    </div>
  </div>
</div>
<p class="position-relative">
  <span class="position-absolute top-0 start-0 translate-middle p-2 bg-secondary border border-dark rounded-circle text-light">10</span>
</p>


<!-- DEV NOTES -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">DEV Notes</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      <p>Look into pagination, caching for big data view</p>
      <p>Query stitching will be a bitch - plan UI for carry forwarding variables</p>
      <p>minimize query options with presents</p>
      <p>plan colour coding of incidents - could get messy</p>
      <p>consider top-level drops</p>

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




<?php get_footer(); ?>
