Untitled

extends layout.pug

block head
  link(rel="stylesheet", href="/css/login.css")

  title MovieStar+ Login

block content
  .container-sm.container-body
    .row.gx-5.align-items-center(style="height: 100vh")
      .col-md-6
        .d-flex.justify-content-center.align-items-center.moviestar-message
          span.moviestar MovieStar
          span.plus-sign +
        p.text-center
          | MovieStar+ is an application that enhances gameplay in
          | MovieStarPlanet 2. The app extends the standard character profile
          | features available in the game, providing players with additional
          | options for interacting and managing their character as well as
          | relationships with other players.
        p.text-center(style="color: var(--color-text-secondary)")
          | By logging in to our application, you consent to the processing of
          | your personal information in accordance with our privacy policy.
          | Furthermore, you are fully responsible for the security of your
          | account.
      .col-md-6.d-flex.justify-content-center
        form.w-100(method="POST")
          .panel
            .panel-body
              .body-item
                .mb-3
                  span.form-label(for="username") Username
                  input.form-control(
                    type="text",
                    name="username",
                    placeholder="Enter username",
                    autocomplete="username"
                  )
              .body-item
                .mb-3
                  span.form-label(for="password") Password
                  input.form-control(
                    type="password",
                    name="password",
                    placeholder="Enter password",
                    autocomplete="current-password"
                  )
              .body-item
                .mb-3
                  span.form-label(for="region") Region
                  p.mb-1(
                    style={
                      "font-size": "var(--font-size-xs)",
                      color: "var(--color-text-secondary)",
                    }
                  ) Select the region on which your account has beed created.
                  select.form-select(name="region")
                    option(value="us") United States
                    option(value="ca") Canada
                    option(value="gb") Great Britain
                    option(value="nl") Netherlands
                    option(value="ie") Ireland
                    option(value="dk") Denmark
                    option(value="fr") France
                    option(value="pl") Poland
                    option(value="se") Sweden
                    option(value="no") Netherlands
                    option(value="fi") Finland
                    option(value="tr") Turkey
                    option(value="es") Spain
                    option(value="de") Germany
                    option(value="au") Australia
                    option(value="nz") New Zealand
                  if locals.incorrectData
                    p(
                      style={
                        "font-size": "var(--font-size-xs)",
                        color: "var(--color-danger)",
                      }
                    ) Incorrect login data.
              .body-item
                .mb-3.d-grid
                  button.btn.w-25(type="submit") Sign in