{% extends "base.html" %}
{% load i18n %}
{% load custom_tags %}
{% load account socialaccount %}



{% block content %}
{% get_providers as socialaccount_providers %}
<div class="flex items-center min-h-screen p-4 bg-gray-100 lg:justify-center">
    <div
      class="flex flex-col  lg:scale-150 overflow-hidden bg-white rounded-md shadow-lg max md:flex-row md:flex-1 lg:max-w-screen-sm"
    >
      <div
        class="p-4 py-6 text-white bg-red-500 md:w-80 md:flex-shrink-0 md:flex md:flex-col md:items-center md:justify-evenly"
      >
        <div class="my-3 text-4xl font-bold tracking-wider text-center">
          <a href="{% url 'index' %}" class="hover:no-underline text-white hover:text-white">{% env 'PROJECT_NAME' %}</a>
        </div>
        <p class="mt-6 font-normal text-center text-white text-xl md:mt-0">
            OWASP BLT is a bug logging tool to report issues and get points, companies are held accountable.
        </p>
        <p class="flex flex-col items-center justify-center text-sm mt-10 text-center">
          <span>Don't have an account?</span>
          <a href="{% url 'account_signup' %}" class="underline text-white">Get Started!</a>
        </p>
        <p class="mt-6 text-sm text-center text-white">
          Read our <a href="{% url 'terms' %}" class="underline text-white">terms</a> and <a href="{% url 'terms' %}" class="underline text-white">conditions</a>
        </p>
      </div>
      <div class="p-5 bg-white md:flex-1">
        <h3 class="my-4 text-2xl font-semibold text-gray-700">Account Login</h3>
        <form class="flex flex-col space-y-5 login" method="POST" action="{% url 'account_login' %}">
            {% csrf_token %}
          <div class="flex flex-col space-y-1">
            <label for="email" class="text-sm font-semibold text-gray-500">Username</label>
            <input
              autofocus
              id="id_login"
              name="login"
              class="px-4 py-2 w-[100%] h-[28px] transition duration-300 border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-red-200"
              />
            <span class="help-block">{{ form.login.errors }}</span>
          </div>
          <div class="flex flex-col space-y-1">
            <div class="flex items-center justify-between">
              <label for="password" class="text-sm font-semibold text-gray-500">Password</label>
              <a href="{% url 'account_reset_password' %}" class="text-sm text-red-600 hover:underline focus:text-red-800">{% trans "Forgot Password?" %}</a>
            </div>
            <input
              type="password"
              id="id_password"
              name="password"
              class="px-4 py-2 w-[100%] h-[28px] transition duration-300 border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-red-200"
            />
            <span class="help-block">{{ form.password.errors }}</span>
          </div>
          <div class="flex items-center space-x-2">
            <input
              type="checkbox"
              id="id_remember"
              name="remember"
              class="w-4 h-4 transition duration-300 rounded focus:ring-2 focus:ring-offset-0 focus:outline-none focus:ring-red-200"
            />
            <label for="remember" class="text-sm font-semibold mt-8 text-gray-500">Remember me</label>
          </div>
          <div>
            <button
              type="submit"
              name="login_button"
              class="px-4 py-2 w-[100%] h-[28px] text-lg font-semibold text-white transition-colors duration-300 bg-red-500 rounded-md shadow hover:bg-red-600 focus:outline-none focus:ring-red-200 focus:ring-4"
            >
              Log in
            </button>
          </div>
          {% if form.errors %}
            <div>
                {% for _, error in form.errors.items %}
                <strong class="text-red-500 text-center text-xl">{{ error }}</strong>
                {% endfor %}
            </div>
        {% endif %}
          <div class="flex flex-col space-y-5">
            <span class="flex items-center justify-center space-x-2">
              <span class="h-px bg-gray-400 w-14"></span>
              <span class="font-normal text-gray-500">or login with</span>
              <span class="h-px bg-gray-400 w-14"></span>
            </span>
            <div class="flex flex-col space-y-4">
              <a
                href="{% url 'github_callback' %}"
                class="w-[100%] h-[28px] flex items-center justify-center px-4 py-2 space-x-2 transition-colors duration-300 border border-gray-800 rounded-md group hover:bg-gray-800 focus:outline-none hover:no-underline"
              >
                <span>
                  <svg
                    class="w-5 h-5 text-gray-800 fill-current group-hover:text-white"
                    viewBox="0 0 16 16"
                    version="1.1"
                    aria-hidden="true"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
                    ></path>
                  </svg>
                </span>
                <span class="text-sm font-medium text-gray-800 group-hover:text-white">Github</span>
              </a>

              <a
                href="{% url 'google_callback' %}"
                class="w-[100%] h-[28px] flex items-center justify-center px-4 py-2 space-x-2 transition-colors duration-300 border border-gray-800 rounded-md group hover:bg-gray-800 focus:outline-none hover:no-underline"
              >
                <span>
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-800 fill-current group-hover:text-white" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2.917 16.083c-2.258 0-4.083-1.825-4.083-4.083s1.825-4.083 4.083-4.083c1.103 0 2.024.402 2.735 1.067l-1.107 1.068c-.304-.292-.834-.63-1.628-.63-1.394 0-2.531 1.155-2.531 2.579 0 1.424 1.138 2.579 2.531 2.579 1.616 0 2.224-1.162 2.316-1.762h-2.316v-1.4h3.855c.036.204.064.408.064.677.001 2.332-1.563 3.988-3.919 3.988zm9.917-3.5h-1.75v1.75h-1.167v-1.75h-1.75v-1.166h1.75v-1.75h1.167v1.75h1.75v1.166z"/></svg>
                </span>
                <span class="text-sm font-medium text-gray-800 group-hover:text-white">Google</span>
              </a>

            <a
              href="{% url 'facebook_callback' %}"
              class="w-[100%] h-[28px] flex items-center justify-center px-4 py-2 space-x-2 transition-colors duration-300 border border-gray-800 rounded-md group hover:bg-gray-800 focus:outline-none hover:no-underline"
            >
              <span>
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-800 fill-current group-hover:text-white" viewBox="0 0 24 24"><path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/></svg>
              </span>
              <span class="text-sm font-medium text-gray-800 group-hover:text-white">Facebook</span>
            </a>

            </div>
          </div>
        </form>
      </div>
    </div>
</div>

{% endblock %}