<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Story-Ly</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/2-col-portfolio.css" rel="stylesheet">

  </head>

  <body>

    <!-- Navigation -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#">Story-Ly</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="/">1 Column
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/2Coll">2 Column</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/3Coll">3 Column</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/4Coll">4 Column</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- Page Content -->
    <div class="container">

      <!-- Page Heading -->
     <h1 class="my-4">Harjit's BS
        <small>Everyone loves BS test data</small>
      </h1>
      <div id="contentList" class="row"></div>
      <!-- /.row -->

      <!-- Pagination -->
      <ul class="pagination justify-content-center">
        <li class="page-item">
          <a class="page-link" href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
            <span class="sr-only">Previous</span>
          </a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#">1</a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#">2</a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#">3</a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
            <span class="sr-only">Next</span>
          </a>
        </li>
      </ul>

    </div>
    <!-- /.container -->

    <!-- Footer -->
    <footer class="py-5 bg-dark">
      <div class="container">
        <p class="m-0 text-center text-white">Copyright &copy; Your Website 2017</p>
      </div>
      <!-- /.container -->
    </footer>

    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/popper/popper.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
	<script>
		GenerateCardForStory = function(content)
		{
			var html = `<div class='col-lg-6 portfolio-item' content-id='`+content.content_id+`'>
					<div class='card h-100'>
						<a href="#">
							<img class="card-img-top" src="http://placehold.it/700x400" alt="">
						</a>
						<div class="card-body">
							<h4 class="card-title">
								<a href="#">`+content.title+`</a>
							</h4>
							<p class="card-text">We need to add Description to DB. I am starting to think that this is honestly just a problem of not enough text which is a dumb problem to have if it is indeed the problem.</p>
						</div>
					</div>
				</div>`;
				$("#contentList").append(html);
				
		}
		
		$(document).ready(function(){
				$.get("/data", function(data, status){
					this.data = data;
					data.data.content.forEach(function(obj){
						GenerateCardForStory(obj);
						GenerateCardForStory(obj);
						GenerateCardForStory(obj);
						GenerateCardForStory(obj);
						GenerateCardForStory(obj);
					});
				});
		});
	</script>

  </body>

</html>
