use leptos::*;
use leptos_meta::*;
use leptos_router::ActionForm;
use crate::backend::user::Login;
use crate::components::modal_box::DialogOpener;
use crate::components::server_err::ServerErr;
use crate::locales::trl;

#[component]
pub fn Login() -> impl IntoView {
    let login = create_server_action::<Login>();
    let login_val = login.value();
    view! {
      <Link rel="stylesheet" href="/vendor/css/pages/page-auth.css" />
      <div class="authentication-wrapper authentication-basic container-p-y">
        <div class="authentication-inner">
          <div class="card">
            <div class="card-body">
              //<!-- Logo -->
              <div class="app-brand justify-content-center">
                <a href="index.html" class="app-brand-link gap-2">
                  <span class="app-brand-logo demo">
                    <img src="/rezervovator_l.svg" width="200"/>
                  </span>
                  //<span class="app-brand-text demo text-body fw-bolder">Sneat</span>
                </a>
              </div>
              //<!-- /Logo -->
              <p class="mb-4">{trl("Please sign-in to your account")}</p>

              <ActionForm action=login>
                <ServerErr result=login_val opener=DialogOpener::new()/>
                <div class="mb-3">
                  <label for="username" class="form-label">{trl("Username")}</label>
                  <input
                    type="text"
                    class="form-control"
                    id="username"
                    name="username"
                    placeholder={trl("Enter your username")}
                    autofocus
                  />
                </div>
                <div class="mb-3 form-password-toggle">
                  <div class="d-flex justify-content-between">
                    <label class="form-label" for="password">{trl("Password")}</label>
                    /*<a href="auth-forgot-password-basic.html">
                      <small>"Forgot Password?"</small>
                    </a>*/
                  </div>
                  <div class="input-group input-group-merge">
                    <input
                      type="password"
                      id="password"
                      class="form-control"
                      name="password"
                      aria-describedby="password"
                    />
                    <span class="input-group-text cursor-pointer"><i class="bx bx-hide"></i></span>
                  </div>
                </div>
                <div class="mb-3">

                </div>
                <div class="mb-3">
                  <button class="btn btn-primary d-grid w-100" type="submit">{trl("Sign in")}</button>
                </div>
              </ActionForm>


            </div>
          </div>
        </div>
      </div>
    }
}