
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>North Cross School Reflections</title>

    <!-- Bootstrap core CSS -->
    <link href="/static/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    
    <link href="/static/resources/fa/css/font-awesome.min.css" rel="stylesheet">
    <link href="/static/resources/sm2/360-player/360player.css" rel="stylesheet">

    <link href="/static/resources/css/common.css" rel="stylesheet">




    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <nav class="navbar custom-nav">
      <div class="container-fluid">
        <ul class="nav navbar-nav pull-right">
          <li>
            <a href="{{ url_for('collection') }}">Browse all</a>
          </li>
          <li>
            <a href="{{ url_for('about') }}">About the project</a>
          </li>
         
        </ul>
        <div class="navbar-header">
          <a class="navbar-brand" href="{{ url_for('index') }}">Home</a>
        </div>

      </div>
    </nav>

    <div class="container-fluid">
      
      <div class="row">
        <div class="col-sm-6 col-sm-offset-3 main text-center">
          <h2>Student Reflection: {{scInfo.name}}</h2>
          <h3>Interviewer: {{scInfo.author}}</h3>
    
        <iframe width="100%" height="450" scrolling="no" frameborder="no" src={{scInfo.src}}></iframe>

          <br>

        </div>
      </div>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="/static/resources/bootstrap/js/bootstrap.min.js"></script>

  </body>
</html>

