<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../demos/assets/bootstrap-4.1.0/bootstrap.min.css">
  <link rel="stylesheet" href="../demos/assets/bootstrap-4.1.0/bootstrap-grid.min.css">
  <link rel="stylesheet" href="./assets/index.css">
  <title>G2 Bundler</title>
</head>
<body>
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="width:0;height:0;position:absolute;overflow:hidden;">
    <defs>
        <symbol viewBox="0 0 1024 960" aria-labelledby="si-metro-download" id="si-metro-download">
          <path d="M512 512l256-256H576V0H448v256H256zm232.727-104.728l-71.74 71.742L933.067 576 512 733.018 90.934 576l260.08-96.986-71.742-71.742L0 512v256l512 192 512-192V512z"/>
        </symbol>
    </defs>
</svg>
<div class="container">
  <div class="row">
    <div class="col"></div>
    <div class="col-6">
      <button class="btn btn-primary btn-lg btn-block" id="select-and-build">
        <svg class="si" fill="white" width="24" height="24" style="vertical-align:sub;margin:0 5px;">
          <use xlink:href="#si-metro-download"></use>
        </svg>
        Select & Build
      </button>
    </div>
    <div class="col"></div>
  </div>
</div>
<div class="container">
  <div class="btn-group" role="group" aria-label="Basic example">
    <button id="select-all" class="btn btn-primary">Select All</button>
    <button id="cancel-select" class="btn">Cancel Select</button>
  </div>
</div>
<div class="container">
  <div class="row">
  {% for b in blocks %}
    <div class="block col-lg-4 col-md-4 col-sm-6" data-index="{{ loop.index0 }}">
      <h5>{{ b.name }}</h5>
      <p>{{ b.description }}</p>
    </div>
  {% endfor %}
  </div>
</div>
<div id="loading">
    <div class="sk-cube-grid">
        <div class="sk-cube sk-cube1"></div>
        <div class="sk-cube sk-cube2"></div>
        <div class="sk-cube sk-cube3"></div>
        <div class="sk-cube sk-cube4"></div>
        <div class="sk-cube sk-cube5"></div>
        <div class="sk-cube sk-cube6"></div>
        <div class="sk-cube sk-cube7"></div>
        <div class="sk-cube sk-cube8"></div>
        <div class="sk-cube sk-cube9"></div>
    </div>
</div>
<script src="../demos/assets/lodash-4.17.4.min.js"></script>
<script src="../demos/assets/jquery-3.2.1.min.js"></script>
<script src="../demos/assets/popper.js-1.12.5/popper.min.js"></script>
<script src="../demos/assets/bootstrap-4.1.0/bootstrap.min.js"></script>
<script src="../demos/assets/file-saver-1.3.8.min.js"></script>
<script src="./assets/index.js"></script>
</body>
</html>
