{% extends 'base.html' %}

{% block content %}

{% for message in messages %}
<div class="alert alert-danger" role="alert">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16">
        <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
    </svg>
      <div>
        {{message}}
    </div>
  </div>
{% endfor %}

<div class="container" style="width: 850px;">
    <br/>
    <h1 style="color: rgb(20, 157, 221);">Login</h1>
    <br/>
    <form method="POST" action="login">
        {% csrf_token %}
        <div class="mb-3">
            <label for="exampleFormControlInput1" class="form-label" style="color: rgb(20, 157, 221);">Username</label>
            <input type="text" class="form-control" id="exampleFormControlInput1" name="username">
            <label for="exampleFormControlInput1" class="form-label" style="color: rgb(20, 157, 221);">Password</label>
            <input type="password" class="form-control" id="exampleFormControlInput1" name="password">
        </div>
        <div class="d-grid gap-2 col-6 mx-auto">
            <input type="submit" value="Submit" class="btn btn-success">
        </div>
        <div class="d-grid gap-2 d-md-flex justify-content-md-end">            
            <form>
                <input type="button" value="Back" onclick="history.back()" class="btn btn-outline-danger" >
            </form>
        </div>
        <div class="d-grid gap-2 d-md-block">
            <form>
                <a href="register"><input type="button" value="Register" class="btn btn-outline-warning" ></a>
            </form>
        </div>
    </form>
</div>
{% endblock %}

<!-- 
    <h1>Login Now</h1>
    <form>
        <input type="button" value="Back" onclick="history.back()">
    </form>
    
    <form method="POST" action="login">
        {% csrf_token %}
        <p>Username: </p>
        <input type="text" name="username"/>

        <p>Password: </p>
        <input type="password" name="password"/> <br>
        
        <input type="submit"/> <br>
        <a href="register"> Login or Signup</a>
    </form> -->