{% extends "base.html" %}

{% load static site_settings %}

{% block title %}{{ block.super }} - Log In{% endblock %}

{% block styles %}
  {{ block.super }}
  <link href="{% static '/tethys_portal/css/account_form.min.css' %}"  rel="stylesheet" />
  <!-- the style for 
    
    - .bi-hydroshare
    - .bi-hydroshare
    - .btn-onelogin:focus
    - .bi-onelogin
    - .btn-onelogin:hover
    - .bi-onelogin
    - .btn-onelogin
    - .bi-onelogin 
    
    were moved from: "tethys_portal/static/tethys_portal/less/account_form.less" 

    to this template because it needs to render the staticfiles dynamically in case the STATIC_URL setting is other than /static/ 
  
  -->

  <style>
    body {
      background: {{ site_globals.background_color|default:'#ffffff' }};
    }
    .bi-hydroshare {
      background:url("{% static 'tethys_portal/images/hs-icon-sm.png' %}") no-repeat;
      background-size: 75%;
      background-position: 4px 5px;
    }
    .bi-arcgis {
      background:url("{% static 'tethys_portal/images/arcgis-icon-sm.png' %}")  no-repeat;
      background-size: 75%;
      background-position: 4px 5px;
    }

    .btn-onelogin:focus .bi-onelogin {
        background:url("{% static 'tethys_portal/images/onelogin_white_32.png' %}")  no-repeat;
    }

    .btn-onelogin:hover .bi-onelogin {
      background:url("{% static 'tethys_portal/images/onelogin_white_32.png' %}")  no-repeat;
    }
    .btn-onelogin .bi-onelogin {
      background:url("{% static 'tethys_portal/images/onelogin_black_32.png' %}")  no-repeat;
      color: #1c1f2a;
      background-size: 75%;
      background-position: 4px 5px;
    }
  </style>
{% endblock %}

{% block custom_styles %}
  {{ site_globals.accounts_base_css|load_custom_css|safe }}
{% endblock %}

{% block content %}
  {% block account_content_top %}
  {% endblock %}
  <div class="container-xl mt-3">
    <div class="row justify-content-center">
      <div class="col-xl-6">
        <div class="account-form-wrapper">
          <div class="account-form-header">
            <h1>{% block account_form_title %}Accounts Form Base{% endblock %}</h1>
          </div>
          <div class="account-form-body">
            {% block account_form_body %}
            {% endblock %}
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}