{% import 'shelf/base/layout.html' as layout with context -%}

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
        <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" media="screen" href="{{ url_for('shelf.static', filename='shelf/css/login.css') }}">
        <link href="{{ url_for('shelf.static', filename='shelf/css/bootstrap.min.css') }}" rel="stylesheet" media="screen">
        {% block css %}

        {% endblock %}
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
    </head>

    <body style="background: url({{ url_for('shelf.static', filename='shelf/img/geometry.png') }})">

        <div class="row" style="height: 100%; width: 100%">
          <div class="col-xs-12" style="height: 50%; margin-bottom: -100px"></div>
          <div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3 col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4">
            <img width="35" height="19" src="{{ url_for('shelf.static', filename='shelf/img/minishelf.png') }}">
            <h1>{% block title %}{% endblock %}</h1>
            <form class="form-horizontal" role="form" action="" method="POST">
              {{ form.csrf_token }}
              {% block form %}
              {% endblock %}
            </form>
          </div>
        </div>

        {{ layout.messages() }}

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://code.jquery.com/jquery.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->

        <script src="{{ url_for('shelf.static', filename='shelf/js/bootstrap.min.js') }}"></script>
    </body>
</html>
