run "touch public/dashboard.css"
inject_into_file 'public/dashboard.css' do <<~EOF
body {
  font-size: .875rem;
}

.feather {
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
}

/*
 * Sidebar
 */

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100; /* Behind the navbar */
  padding: 48px 0 0; /* Height of navbar */
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

@media (max-width: 767.98px) {
  .sidebar {
    top: 5rem;
  }
}

.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 48px);
  padding-top: .5rem;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sidebar-sticky {
    position: -webkit-sticky;
    position: sticky;
  }
}

.sidebar .nav-link {
  font-weight: 500;
  color: #333;
}

.sidebar .nav-link .feather {
  margin-right: 4px;
  color: #999;
}

.sidebar .nav-link.active {
  color: #007bff;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
  color: inherit;
}

.sidebar-heading {
  font-size: .75rem;
  text-transform: uppercase;
}

/*
 * Navbar
 */

.navbar-brand {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: 1rem;
  background-color: rgba(0, 0, 0, .25);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .navbar-toggler {
  top: .25rem;
  right: 1rem;
}

.navbar .form-control {
  padding: .75rem 1rem;
  border-width: 0;
  border-radius: 0;
}

.form-control-dark {
  color: #fff;
  background-color: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

  EOF
end





run "touch public/dashboard.js"
inject_into_file 'public/dashboard.js' do <<~EOF
(function () {
  'use strict'

  feather.replace()

  // Graphs
  var ctx = document.getElementById('myChart')
  // eslint-disable-next-line no-unused-vars
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: [
        'Sunday',
        'Monday',
        'Tuesday',
        'Wednesday',
        'Thursday',
        'Friday',
        'Saturday'
      ],
      datasets: [{
        data: [
          15339,
          21345,
          18483,
          24003,
          23489,
          24092,
          12034
        ],
        lineTension: 0,
        backgroundColor: 'transparent',
        borderColor: '#007bff',
        borderWidth: 4,
        pointBackgroundColor: '#007bff'
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: false
          }
        }]
      },
      legend: {
        display: false
      }
    }
  })
})()

  EOF
end

run "touch app/views/layouts/_sidenav.html.erb"
inject_into_file 'app/views/layouts/_sidenav.html.erb' do <<~EOF

    <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse sidebar-custom">
      <div class="sidebar-sticky pt-3">
        <ul class="nav flex-column">

          <li class="nav-item">
            <a class="nav-link" href="<%#= dashboard_path%>">
              <span data-feather="grid"></span>
              Dashboard 
            </a>
          </li>

          <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
            <span>Org. Name</span>
            <a class="d-flex align-items-center text-muted" href="#" aria-label="Add a new report">
            </a>
          </h6>

          <li class="nav-item">
            <a class="nav-link" href="<%#= comestibles_path %>">
              <span data-feather="layers"></span>
              Stores !
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="monitor"></span>
              Terminals !
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="cpu"></span>
              Logs !
            </a>
          </li>
        
        </ul>

        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
          <span>Admin</span>
          <a class="d-flex align-items-center text-muted" href="#" aria-label="Add a new report">
          </a>
        </h6>

        <ul class="nav flex-column mb-2">

          <li class="nav-item">
            <a class="nav-link" href="<%#= countries_path %>">
              <span data-feather="users"></span>
              Accounts !
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="<%#= categories_path %>">
              <span data-feather="globe"></span>
              Organizations !
            </a>
          </li>      

          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="file-text"></span>
              Stores !
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="file-text"></span>
              Terminals !
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="<%#= logs_path %>">
              <span data-feather="file-text"></span>
              Logs
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              
              
            </a>
          </li>

        </ul>

        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
          <span>Settings</span>
          <a class="d-flex align-items-center text-muted" href="#" aria-label="Add a new report">
          </a>
        </h6>

        <ul class="nav flex-column mb-2">

          <li class="nav-item">
            <a class="nav-link" href="<%#= countries_path %>">
              <span data-feather="globe"></span>
              Account !
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="log-out"></span>
              Logout !
              <%#= link_to '| Logout |', destroy_user_session_path, :method => :delete, :class=>"nav-link"%>          
            </a>
          </li>

        </ul>
      </div>
    </nav>

  EOF
end

run "touch app/views/layouts/_topnav.html.erb"
inject_into_file 'app/views/layouts/_topnav.html.erb' do <<~EOF
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow navbar-custom">
	
	<a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="<%= root_path %>">App Name</a>

	<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>

	<!-- <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search"> -->
	<%#if user_signed_in? %>
	<ul class="navbar-nav px-3">
		<li>
			Logged in as:
			<%#= link_to '+ Add Comestible', new_comestible_path, :class=>"btn btn-outline-dark btn-sm" %>
		</li>
	</ul>
	<%#end%>
</nav>

  EOF
end


inject_into_file 'app/views/layouts/application.html.erb', before: '</head>' do <<~EOF
  <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>

  <link href="../dashboard.css" rel="stylesheet">
  EOF
end

inject_into_file 'app/views/layouts/application.html.erb', before: '<%= yield %>' do <<~EOF
    <%= render 'layouts/topnav'%>

    <div class="container-fluid">
      <div class="row">

        <%#if user_signed_in? %>
          <%= render 'layouts/sidenav'%>    
        <%#end%>
        
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
          <br>
  EOF
end


inject_into_file 'app/views/layouts/application.html.erb', after: '<%= yield %>' do <<~EOF
        </main>

      </div>
    </div>

    <script>window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"><\/script>')</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.9.0/feather.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
    <script src="../dashboard.js"></script>
  EOF
end