{% extends "website/base.html" %}
{% load ev_tags static %}
{% block title %}Login – {{ site.brand_name }}{% endblock %}
{% block body_class %}page-login{% endblock %}
{% block chrome_top %}{% endblock %}
{% block chrome_bottom %}{% endblock %}
{% block content %}
<div class="login">
  <img class="login__bg" src="{% static 'img/hero-lineup.jpg' %}" alt="">
  <div class="login__in">
    <div class="login__brand">
      {% include "website/partials/logo.html" with light=True %}
      <h1>ATMOSPHERE <em>EV</em><span>Role-Based Login Portal</span></h1>
      <p>Access your dedicated dashboard as a Customer, Member, Leader, C&amp;F or Dealer.</p>
      <ul class="login__pills">
        <li><span class="is-green">{% icon "leaf" 22 %}</span>Clean<br>Mobility</li>
        <li><span>{% icon "bolt" 22 %}</span>Smart<br>Technology</li>
        <li><span>{% icon "shield" 22 %}</span>Secure<br>Access</li>
        <li><span>{% icon "users" 22 %}</span>Role-Based<br>Dashboard</li>
      </ul>
    </div>

    <form class="login__card" method="post" novalidate data-login>
      {% csrf_token %}
      <a href="{% url 'website:home' %}" class="login__back">{% icon "home" 16 %} Back to Website</a>
      <h2>Login to Your Account</h2>
      <p class="muted">Select your account type and sign in.</p>

      <label class="login__label" for="role">Select Account Type</label>
      <div class="role-dd">
        <span class="role-dd__lbl">{% icon "users" 20 %} Select Role</span>
        <select id="role" name="role" data-role-dropdown>
          {% for r in roles %}<option value="{{ r.value }}" {% if r.value == selected %}selected{% endif %}>{{ r.label }}</option>{% endfor %}
        </select>
        <span class="role-dd__chev">{% icon "chev-d" 18 %}</span>
      </div>

      {% if error %}<div class="form__err" role="alert">{{ error }}</div>{% endif %}

      <label class="field">{% icon "mail" 18 %}<input type="text" name="identifier" value="{{ identifier }}" placeholder="Mobile / Email" autocomplete="username" required aria-label="Mobile or email"></label>
      <label class="field">{% icon "lock" 18 %}<input type="password" name="password" placeholder="Password" autocomplete="current-password" required aria-label="Password" data-pw><button type="button" class="field__eye" data-pw-toggle aria-label="Show password">{% icon "eye" 18 %}</button></label>

      <div class="login__row">
        <label class="check"><input type="checkbox" name="remember" value="1"> Remember me</label>
        <a href="{% url 'website:forgot_password' %}">Forgot password?</a>
      </div>
      <button class="btn btn--orange btn--pill btn--block btn--lg" type="submit">{% icon "login" 20 %} Login</button>

      <div class="login__register">
        {% for r in roles %}
        <p data-register-for="{{ r.value }}" {% if r.value != selected %}hidden{% endif %}>
          {% if r.register.1 == "apply" %}
            <a href="{% url 'website:contact' %}?type={% if r.value == 'CF' %}CF{% else %}DEALERSHIP{% endif %}#enquiry">{{ r.register.0 }} {% icon "arrow" 14 %}</a>
          {% elif r.register.1 %}
            {{ r.register.0 }} <span class="badge badge--soft">Opens in {{ r.register.1 }}</span>
          {% else %}
            {{ r.register.0 }}
          {% endif %}
        </p>
        {% endfor %}
      </div>

      <div class="login__secure">{% icon "shield" 26 %}<div><b>Secure &amp; Encrypted Access</b><span>Your data is protected with industry-standard security.</span></div></div>
    </form>
  </div>
</div>
{% endblock %}