<script type='text/javascript'>
$(function() {
  // These settings override the defaults set in application.coffee. You can do this on a per dashboard basis.
  Dashing.gridsterLayout('[{"col":3,"row":1,"size_x":1,"size_y":1},{"col":1,"row":1,"size_x":2,"size_y":2},{"col":1,"row":3,"size_x":1,"size_y":1},{"col":4,"row":2,"size_x":2,"size_y":1},{"col":4,"row":3,"size_x":2,"size_y":1},{"col":2,"row":3,"size_x":1,"size_y":1},{"col":4,"row":1,"size_x":2,"size_y":1},{"col":3,"row":2,"size_x":1,"size_y":2}]')
  Dashing.widget_base_dimensions = [370, 340]
  Dashing.numColumns = 5
});
</script>


<% content_for :title do %>mg36-dashboard<% end %>

<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-view="Clock"></div>
      <i class="far fa-clock icon-background"></i>
    </li>

    <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
      <div data-id="aww" data-view="RandomAww"></div>
    </li>

    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="server_status" data-view="ServerStatus" data-title="Server Status"></div>
    </li>

    <li data-row="3" data-col="4" data-sizex="2" data-sizey="1">
      <div data-id="NationalRail_1" data-view="NationalRail" data-unordered="true" data-title="Trains (1)" style="background-color: #0f516b"></div>
      <i class="fa fa-train icon-background"></i>
    </li>

    <li data-row="3" data-col="4" data-sizex="2" data-sizey="1">
      <div data-id="NationalRail_2" data-view="NationalRail" data-unordered="true" data-title="Trains (2)" style="background-color: #0f516b"></div>
      <i class="fa fa-train icon-background"></i>
    </li>

    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="quote" data-view="Quote"></div>
    </li>
    
    <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
      <div data-view="DailyXKCD" data-id="xkcd-of-the-day"></div>
    </li>

    <li data-row="1" data-col="1" data-sizex="1" data-sizey="2">
      <div data-id="a_timeline" data-view="Timeline" data-title=""></div>
    </li>

  </ul>
</div>
