<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <script src="/static/main.js"></script>
    <style>
      body {
        text-align:center;
      }
      #container {
        display: flex;
        flex-direction: column;
        margin: auto auto;
        height: 95vh;
        width: 75vw;
      }
      #container div {
        align-self: center;
      }
      #container img {
        align-self: center;
        object-fit: cover;
        max-width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="container">
      {% with messages = get_flashed_messages() %}
      {% if messages %}
      <ul class="messages">
        {% for message in messages %}
        <li>{{ message }}</li>
        {% endfor %}
      </ul>
      {% endif %}
      {% endwith %}
      <div id="main"></div>
    </div>
    <script>
      var app = Elm.Main.init({
        node: document.getElementById('main')
      });
    </script>
  </body>
</html>
