{{#partial "page"}} 

<!--GPI ADDED STYLE BLOCK-->
<style>
/**BEGIN OVERRIDES**/
.login-important-msg-container .login-msg-container {
    margin-bottom: 30px;
}
.login-important-msg-container .msg-container-title {
    padding: 5px 10px;
    top: -5px;
}
.login-row {
    margin-top: 0 !important;
}
.login-form-container {
    border-radius: 10px;
    border: 2px solid #e5e5e5;
    padding: 20px;
}
.new-customer {
    padding-left: 0;
    padding-right: 0;
}
.login-form-container, .new-customer {
    margin-bottom: 30px;
}
.page-type-login .login-row .form-actions .forgot-password {
    padding: 17px 0;
}
.new-customer .new-customer-fact-list-wrap, .new-customer .new-customer-fact-list {
    max-height: 280px;
}
.new-customer .panel-title h2, .login-form-container .panel-title h2, .login-important-msg-container .panel-title {
    font-weight: 800;
}
@media (min-width: 801px) {
.login-form-container, .new-customer {
    width: calc(50% - 15px);
}
.login-form-container {
    margin-right: 15px;
}
.new-customer {
    margin-left: 15px;
    padding-left: 0;
    padding-right: 0;
}
}
/**BEGIN MORE LOGIN OPTIONS**/
.group-login-options.dropdown {
    margin-top: 30px;
}
.group-login-options button.btn.btn-primary.dropdown-toggle {
    height: 60px;
    width: 100%;
    font-size: 14px;
    background-color: #ffffff !important;
    border: 2px solid #d2d2d2;
    color: #1f2c38 !important;
    padding-right: 50px;
    line-height: 43px;
    font-weight: 700;
    border-radius: 10px;
    padding-left: 20px;
    position: relative;
}
.group-login-options .loginicon {
  width: auto;
  margin-right: 15px;
  height: 100%;
  display: inline-block;
  vertical-align: top;
}
.group-login-options .dropdown-toggle .icon {
  font-size: inherit -moz-transition: -moz-transform .3s;
  -ms-transition: -ms-transform .3s;
  -o-transition: -o-transform .3s;
  transition: transform .3s;
  -webkit-transition: -webkit-transform .3s;
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  line-height: 60px;
  width: 50px;
  text-align: center;
  font-size: 36px;
}
.group-login-options .btn {
  text-align: left;
}
.group-login-options .btn-primary.active.focus, .group-login-options .btn-primary.active:focus, .group-login-options .btn-primary.active:hover, .group-login-options .btn-primary:active.focus, .group-login-options .btn-primary:active:focus, .group-login-options .btn-primary:active:hover, .group-login-options .open > .dropdown-toggle.btn-primary.focus, .group-login-options .open > .dropdown-toggle.btn-primary:focus, .group-login-options .open > .dropdown-toggle.btn-primary:hover {
  background-color: #DEE0E0;
  color: black;
  border: 1px #d3d3d3 solid;
}
.group-login-options .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    font-size: 20px;
    padding: 0;
    margin-top: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    max-width: 100%;
    min-width: 100%;
    border: 2px solid #d2d2d2;
    -webkit-box-shadow: 0 0px 0px rgb(0 0 0 / 0);
    box-shadow: 0 0px 0px rgb(0 0 0 / 0);
}
.login-form-container hr.login-divider {
    border-top: 2px solid #e5e5e5;
    margin-top: 30px;
}
.group-login-options .icondrop {
  width: 30px;
  margin-right: 10px;
}
.group-login-options .dropdown {
  width: 100%;
  font-size: 20px;
  padding: 0;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden;
}
.group-login-options .dropdown-menu > li > a {
  padding: 10px 15px;
  color: #1f2c38;
  font-size: 16px;
}
.dropdown.group-login-options.open .dropdown-toggle .icon {
  -moz-transition: -moz-transform .3s;
  -ms-transition: -ms-transform .3s;
  -o-transition: -o-transform .3s;
  transition: transform .3s;
  -webkit-transition: -webkit-transform .3s;
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}
@media screen and (max-width: 767px) {
  .group-login-options .dropdown-menu > li > a {
    font-size: 14px;
  }
}
</style>
<div class="login"> {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
  <h1 class="page-heading">{{lang 'login.heading' }}</h1>
  {{#if forms.login.error}}
  {{> components/common/alert/alert-error forms.login.error}}
  {{/if}}
  {{#if forms.login.success}}
  {{> components/common/alert/alert-success forms.login.success}}
  {{/if}}
  {{!> components/common/login-important-msg}}
  <div class="login-row">
    <div class="login-form-container">
      <div class="panel-title">
        <h2>Login to Existing Group.com Account</h2>
      </div>
      <form class="login-form form" action="{{urls.auth.check_login}}" method="post">
        <input type="hidden" id="redirect_to" name="redirect_to" value="/account.php">
        {{inject 'useValidEmail' (lang 'forms.validate.common.email_address')}}
        {{inject 'enterPass' (lang 'forms.validate.common.password')}}
        <div class="form-field">
          <label class="form-label" for="login_email">{{lang 'login.field_email'}}</label>
          <input class="form-input" name="login_email" id="login_email" type="email">
        </div>
        <div class="form-field">
          <label class="form-label" for="login_pass">{{lang 'login.field_password'}}</label>
          <input class="form-input" id="login_pass" type="password" name="login_pass" autocomplete="off">
        </div>
        <div class="form-actions">
          <input type="submit" class="button button--primary" value="{{lang 'login.submit_value' }}">
          <a class="forgot-password" href="{{urls.auth.forgot_password}}">{{lang 'login.forgot_password' }}</a> </div>
      </form>
      <!--GPI ADDED MORE LOGIN OPTIONS HTML-->
      <div class="gpi-cont">
          <hr class="login-divider">
        <div class="dropdown group-login-options">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Login to Other Apps & Services <span class="icon group-global-icon-angle-down"></span></button>
          <ul class="dropdown-menu">
            <li><a href="https://www.group.com/gift-registry/login/?mrlogin=1"><img src="https://cdnservices.group.com/media/5600052/groups-gift-registry-login-icon.png" class="icondrop" alt="Group's Gift Registry">Group's Gift Registry</a></li>
            <li><a href="https://www.group.com/paymybill" target="_blank"><img src="https://cdnservices.group.com/media/5580989/pay-my-bill-icon.png" class="icondrop">Pay My Bill</a></li>
            <li><a href="https://diginapp.group.com/Account/Login" target="_blank"><img src="https://cdnservices.group.com/media/5576631/digin.png" class="icondrop">DIG IN</a></li>
            <li><a href="https://vbspro.events/users/sign_in" target="_blank"><img src="https://cdnservices.group.com/media/5576637/vbspro.png" class="icondrop">VBS PRO</a></li>
            <li><a href="https://vbstraininglab.group.com/users/sign_in" target="_blank"><img src="https://cdnservices.group.com/media/5590416/vbs-training-lab-login-icon.png" class="icondrop">VBS Training LAB</a></li>
            <li><a href="https://secure.livecurriculum.com/users/sign_in" target="_blank"><img src="https://cdnservices.group.com/media/5576636/live.png" class="icondrop">LIVE Curriculum</a></li>
            <li><a href="https://groupu.group.com/users/sign_in" target="_blank"><img src="https://cdnservices.group.com/media/5579205/group-u.png" class="icondrop">Group U Online Training</a></li>
            <li><a href="https://secure.symt.us/login" target="_blank"><img src="https://cdnservices.group.com/media/5576634/simplytext.png" class="icondrop">Simply Text</a></li>
            <li><a href="http://digital.group.com/login/" target="_blank"><img src="https://cdnservices.group.com/media/5576635/downloads.png" class="icondrop">Digital Download Center</a></li>
            <li><a href="https://www.group.com/category/ministry-resources/volunteer-management/shepherds-watch-background-checks.do?openLogin" target="_blank"><img src="https://cdnservices.group.com/media/5576643/shepherdswatch.png" class="icondrop">Shepherd's Watch</a></li>
          </ul>
        </div>
      </div>
    </div>
    {{#if settings.account_creation_enabled}}
    <div class="new-customer">
      <div class="panel" >
        <div class="panel-title">
          <h2 class="">{{lang 'login.new_customer.heading'}}</h2>
        </div>
        <div class="panel-body">
          <p class="new-customer-intro" >{{lang 'login.new_customer.intro'}}</p>
          <div class="new-customer-fact-list-wrap">
            <ul class="new-customer-fact-list" >
              <li class="new-customer-fact">{{lang 'login.new_customer.fact1.text'}}
                <div class="new-customer-label"><span>{{lang 'login.new_customer.fact1.label'}}</span></div>
              </li>
              <li class="new-customer-fact">{{lang 'login.new_customer.fact2.text'}}
                <div class="new-customer-label"><span>{{lang 'login.new_customer.fact2.label'}}</span></div>
              </li>
              <li class="new-customer-fact">{{lang 'login.new_customer.fact3.text'}}
                <div class="new-customer-label"><span>{{lang 'login.new_customer.fact3.label'}}</span></div>
              </li>
              <li class="new-customer-fact">{{lang 'login.new_customer.fact4.text'}}
                <div class="new-customer-label"><span>{{lang 'login.new_customer.fact4.label'}}</span></div>
              </li>
              <li class="new-customer-fact">{{lang 'login.new_customer.fact5.text'}}
                <div class="new-customer-label"><span>{{lang 'login.new_customer.fact5.label'}}</span></div>
              </li>
              <li class="new-customer-fact">{{lang 'login.new_customer.fact6.text'}}
                <div class="new-customer-label"><span>{{lang 'login.new_customer.fact6.label'}}</span></div>
              </li>
              <li class="new-customer-fact">{{lang 'login.new_customer.fact7.text'}}
                <div class="new-customer-label"><span>{{lang 'login.new_customer.fact7.label'}}</span></div>
              </li>
              <li class="new-customer-fact">{{lang 'login.new_customer.fact8.text'}}
                <div class="new-customer-label"><span>{{lang 'login.new_customer.fact8.label'}}</span></div>
              </li>
              <li class="new-customer-fact">{{lang 'login.new_customer.fact9.text'}}
                <div class="new-customer-label"><span>{{lang 'login.new_customer.fact9.label'}}</span></div>
              </li>
              <li class="new-customer-fact">{{lang 'login.new_customer.fact10.text'}}
                <div class="new-customer-label"><span>{{lang 'login.new_customer.fact10.label'}}</span></div>
              </li>
              <li class="new-customer-fact">{{lang 'login.new_customer.fact11.text'}}
                <div class="new-customer-label"><span>{{lang 'login.new_customer.fact11.label'}}</span></div>
              </li>
              <li class="new-customer-fact">{{lang 'login.new_customer.fact12.text'}}
                <div class="new-customer-label"><span>{{lang 'login.new_customer.fact12.label'}}</span></div>
              </li>
            </ul>
          </div>
          <a href="/login.php?action=create_account">
          <button class="button button--primary">Create Account</button>
          </a> </div>
      </div>
    </div>
    {{/if}} </div>
</div>
{{/partial}}
{{> layout/base}}