<!DOCTYPE html>
<html>

<head>
  <title>Active Designer</title>
  <link rel="stylesheet" href="<%= @path %>/public/css/bootstrap.min.css">
  <script src="<%= @path %>/public/js/tether.min.js"></script>
  <script src="<%= @path %>/public/js/jquery-3.1.1.js"></script>
  <script src="<%= @path %>/public/js/bootstrap.min.js"></script>
  <script src="<%= @path %>/public/js/jsPlumb-2.2.8.js"></script>
  <script src="<%= @path %>/public/js/schema/jsPlumb.js"></script>
  <script src="<%= @path %>/public/js/schema/edit-checker.js"></script>
  <script src="<%= @path %>/public/js/schema/edit-table-name.js"></script>
  <script src="<%= @path %>/public/js/schema/listeners.js"></script>
  <script src="<%= @path %>/public/js/schema/mouse-controls.js"></script>
  <script src="<%= @path %>/public/js/schema/add-column.js"></script>
  <script src="<%= @path %>/public/js/schema/table-html.js"></script>
  <link rel="stylesheet" href="<%= @path %>/public/css/main.css" >
  <link rel="stylesheet" href="<%= @path %>/public/css/cards.css" >
  <link rel="stylesheet" href="<%= @path %>/public/css/font-awesome-4.7.0/css/font-awesome.min.css">
</head>

<body>
  <nav class="navbar bg-inverse">
    <ul class="nav navbar-nav">
      <li class="nav-item taco float-xs-left">
        <a class="btn btn-default" data-toggle='popover' data-trigger='hover' data-content='Create a new table' href='#' >
          <i class="fa fa-plus-square-o fa-3x" aria-hidden="true"></i>
        </a>
      </li>

      <li class="nav-item float-xs-left scroller">
        <div class="switch">
          <div id='zoom-out' class='zoom-button'>
            <i  class="fa fa-chevron-circle-left fa-2x" aria-hidden="true"></i>
          </div>
          <div class='slider-box'>
          </div>
          <div class="slider round">
            <i class="fa fa-arrows-h" aria-hidden="true"></i>
          </div>
          <div id='zoom-in' class='zoom-button'>
            <i class="fa fa-chevron-circle-right fa-2x" aria-hidden="true"></i>
          </div>
        </div>

      </li>

      <li class="nav-item float-xs-center">
        <a class="btn btn-default navbar-brand" data-toggle='popover' data-trigger='hover' data-placement="left" data-content='Enter name of database' href='#' >
          <h2><%= @file_name %></h2>
        </a>
      </li>
    </ul>
  </nav>
  <div class="alert-bar">

  </div>

  <div id="bar" class="canvasBorder" >
    <div id="foo" class="jsPlumbBoundary" >
      <% table_x = 10 %>
      <% table_y = 10 %>
      <% @tables.each do |table_id,table| %>
        <div class='card' id='<%= table_id %>' style="top:<%="#{table_y}"%>px;left:<%="#{table_x}"%>px;">
          <div class='card-header'>
            <i class="fa fa-arrows" aria-hidden="true"></i>
            <h4 class='card-title table-title' data-toggle='popover' data-trigger='hover' data-content='Edit table name'>
              <%= table[:name] %>
            </h4>
            <div class='table-nav-buttons'>
              <i class='fa fa-plus-square' data-toggle='popover' data-trigger='hover' data-content='Add column'></i>
              <i class='fa fa-trash delete-table' data-toggle='popover' data-trigger='hover' data-content='Destroy table'></i>
            </div>
          </div>
          <div class='card-block'>
            <ul class='list-group'>
              <li class='list-group-item' id="<%= table_id %>-id-column">
                <span class='tag tag-default float-xs-left type-span'>integer</span>
                <div class='column-title-outer' >
                  <span class='column-title' >id</span>
                </div>
              </li>
              <% table[:columns].each do |column_id,column| %>
              <li class='list-group-item' id='<%= column_id %>'>
                <span class='tag tag-default float-xs-left type-span' data-toggle='popover' data-trigger='hover' data-content='Edit type'><%= column[:type] %></span>
                <div class='column-title-outer' >
                  <span class='column-title' data-toggle='popover' data-trigger='hover' data-content='Edit column name'><%= column[:name] %></span>
                </div>
                <i class='fa fa-trash delete-column' data-toggle='popover' data-trigger='hover' data-content='Destroy column'></i>
              </li>
              <% end %>
              <% table[:references].each do |reference_id,reference| %>
              <li class='list-group-item' id='<%= reference_id %>'>
                <span class='tag tag-default float-xs-left type-span'>integer</span>
                <div class='column-title-outer' >
                  <span class='column-title'><%= "#{reference[:foreign_table_name]}_id" %></span>
                </div>
                <i class='fa fa-trash delete-ref' data-toggle='popover' data-trigger='hover' data-content='Destroy table'></i>
              </li>
              <% end %>
            </ul>
          </div>
        </div>
        <% if table_x >= 650 %>
          <% table_x = 10 %>
          <% table_y = table_y + 300 %>
        <% else %>
          <% table_x = table_x + 275 %>
        <% end %>
      <% end %>
    </div>
  </div>
  <script>
    localStorage.setItem("schema",JSON.stringify(<%= @schema %>))
  </script>

</body>

<script src="<%= @path %>/public/js/schema/main.js"></script>

</html>
