<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Chart-o-Gram</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="ui/bootstraptheme.css?primary=%23314ccd&secondary=%23868e96&success=%231ec68e&info=%2317a2b8&warning=%23ffd334&danger=%23dc3545&light=%23eff9ef&dark=%23607d9c&body-bg=%23ffffff&body-color=%23103036&enable-rounded=on&enable-shadows=on&enable-gradients=on&enable-transitions=on&enable-print-styles=on&font-family-base=helvetica&headings-font-family=roboto" />
  <link rel="stylesheet" href="ui/font-awesome/css/font-awesome.min.css">
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light d-flex mb-3">
    <a class="navbar-brand" href="gallery.html"><img src="assets/logo.png" alt="Chart-o-Gram" height="40"></a>
  </nav>
  <div class="gallery container-fluid">
    <div class="row">
      <div class="col-md-2">
        <div class="list-group" role="tablist" id="chartsList">
          <script type="text/html">
            <% order.forEach(function(category) { %>
              <a class="list-group-item list-group-item-action urlfilter" data-toggle="list" url="?category=<%= category.replace(/ /g,'_') %>" href="#<%= category.replace(/ /g,'_') %>" role="tab" ><%= category %></a>
            <% }) %>
          </script>
        </div>
      </div>
      <div class="col-md-10">
        <div class="tab-content">
          <script type="text/html">
              <% order.forEach(function(category) { %>
                <div class="tab-pane fade" id="<%= category.replace(/ /g,'_') %>" role="tabpanel">
                  <h2 class="mb-4" id="<%= category.replace(/ /g,'_') %>"><%= category %></h2>
                  <% data[category].forEach(function(item) { %>
                    <div class="d-inline-flex p-1">
                      <div class="position-relative">
                        <a href="example.html?chart=<%- item.chart %>" class="">
                          <img class="shadow" src="assets/images/<%- item.chart %>.png" title="<%- item.title %>" alt="<%- item.title %>" width="300">
                        </a>
                        <% if(item.data_mapper) { %>
                        <span class="fa fa-pencil position-absolute p-1 pos-tr" aria-hidden="true"></span>
                        <% } %>
                      </div>
                    </div>
                  <% }) %>
                </div>
              <% }) %>
          </script>
        </div>
      </div>
    </div>
  </div>
  <footer class="border-top mt-5 pt-3">
    <div class="container">
      <small>
        This page is synchronized with the <a href="https://gramener.invisionapp.com/d/main#/projects/prototypes/7709561">Visualization
          Charts Library</a> on Invision (for those with access.)
      </small>
    </div>
  </footer>
</body>
<script src="ui/jquery/dist/jquery.min.js"></script>
<script src="ui/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="ui/lodash/lodash.min.js"></script>
<script src="ui/g1/dist/g1.min.js"></script>
<script>
  $('.list-group')
    .urlfilter({target: '#', attr: 'url'})

  $.getJSON('examples.json')
    .done(function (data) {
      render({ data: data })
    })
    .fail(function (xhr, status, message) {
      $('div.gallery').html('Failed: ' + message)
    })

  function render(options) {
    var data = _.groupBy(options.data, 'category')
    var order = options.order || _.keys(data)
    $('script[type="text/html"]').template({ data: data, order: order })

    var selected_category = window.location.href.split('category=')[1]
    if (selected_category) {
      //renders category based on url param
      $('a[href="#' + selected_category + '"]').click()
    } else {
      //renders first child in the list group
      $('#chartsList a:first-child').addClass('active')
      $('#chartsList > a:nth-child(2)').tab('show')
    }
  }
</script>

</html>
