{% extends "layout/home.html" %}
{% load crispy_forms_tags %}
{% load static %}

{% block styles %}
<link rel="stylesheet" href="{% static 'users/card.css' %}"></link>
{% endblock styles %}

{% block content %}
<div id="main-container" class="container">
  <div id="card" class="card border-dark bg-light mb-3" style="width: 100%; text-align: center; margin: 3rem">
    <div class="card-body">
      <div class="content-section">
        <form method="POST">
          {% csrf_token %}
          <fieldset class="form-group">
            <legend class="border-bottom mb-4"> Join Today </legend>
            {{ form|crispy }}
          </fieldset>
          <div class="form-group">
            <button class="btn btn-outline-info" type="submit"> Sign Up </button>
        </form>
        <div class="border-top pt-3">
          <small class="text-muted">
            Already Have An Account? <a class="ml-2" href="{% url 'login' %}"> Sign In </a>
            <small>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock content %}