<head>
  <!-- Metadata to make scaling work better -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>App Login</title>

  <!-- Import google font to match Canvas authorization page font -->
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

  <!-- Inline styles for simplicity -->
  <!-- Designed to replicate Canvas authorization page to minimize confusion -->
  <style type="text/css">
    /* ----- PAGE/LAYOUT: ----- */

    /* Body (background color and font to match Canvas authorization page) */
    body {
      background-color: #313c45;
      text-align: center;
      font-family: 'Lato', sans-serif;
    }

    /* Container so the course chooser won't span the whole width of the page */
    .container {
      margin-left: 30px;
      margin-right: 30px;
      margin-top: 10px;
      max-width: 850px;
      width: 100%;
      background-color: #37444e;
      color: black;
      border-radius: 5px;
      -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
      -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
      box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
      display: inline-block;
      text-align: left;
    }

    /* Content header (top of page, separated from content) */
    .header {
      border-bottom: 1px solid black;
      padding-left: 15px;
      padding-right: 15px;
      padding-top: 20px;
      padding-bottom: 20px;
      background-color: #37444e;
      color: white;
      border-radius: 5px 5px 0 0;
    }

    /* Page title */
    .title {
      font-size: 1.5em;
      font-weight: bold;
    }

    /* Page subtitle, slightly dimmed */
    .subtitle {
      font-size: 1.2em;
      color: #ccc;
    }

    /* Lower portion of the page, white background, the content: course list */
    .content {
      background-color: white;
      border-radius: 0 0 5px 5px;

      padding-left: 15px;
      padding-right: 15px;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    /* Authorize button) */
    .authorize-button {
      display: block;
      background-color: #3b8edc;
      color: white;
      font-weight: bold;
      border-radius: 5px;
      padding-left: 15px;
      padding-right: 15px;
      padding-top: 20px;
      padding-bottom: 20px;
      margin-bottom: 10px;
      text-decoration: none;
      text-align: center;
      border: 1px solid gray;
    }

    /* Highlight the authorize button on hover */
    .authorize-button:hover {
      background-color: #48a8f0;
    }

    /* Cancel button) */
    .cancel-button {
      display: block;
      background-color: #f5f5f5;
      color: black;
      font-weight: bold;
      border-radius: 5px;
      padding-left: 15px;
      padding-right: 15px;
      padding-top: 20px;
      padding-bottom: 20px;
      margin-bottom: 10px;
      text-decoration: none;
      text-align: center;
      margin-top: 20px;
      border: 1px solid gray;
    }

    /* Highlight the cancel button on hover */
    .cancel-button:hover {
      background-color: #e8e8e8;
    }

    /* Large app title */
    .app-title {
      font-size: 1.5em;
      margin-bottom: 10px;
    }
  </style>

</head>

<body>

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

    <!-- Header (title and subtitle) -->
    <div class="header">
      <div class="title">Canvas</div>
      <div class="subtitle">(simulated)</div>
    </div>

    <!-- Content (list of courses) -->
    <div class="content">
      <div class="app-title">
        CACCL Simulated App
      </div>
      <div style="margin-bottom: 5px;">
        <strong>CACCL Simulated App is requesting access to your account.</strong>
      </div>
      <div>
        You are authorizing this app as <%= name %>.
      </div>

      <a class="cancel-button" href="<%= cancelURL %>">
        Cancel
      </a>
      <a class="authorize-button" href="<%= approveURL %>">
        Authorize
      </a>
    </div><!-- End Content -->

  </div><!-- End Container -->

</body>
