using Gtk 4.0;

template $LoginWindow : ApplicationWindow {
  title: "SimpleLogin";

  Overlay forms_overlay {
    valign: center;
    vexpand: true;

    child: Box forms_wrapper {
      orientation: vertical;

      Box {
        valign: end;
        vexpand: true;

        Grid {
          halign: end;
          hexpand: true;
          margin-bottom: 10;
          margin-end: 10;
          margin-start: 10;
          margin-top: 10;
          valign: center;

          Label {
            hexpand: true;
            label: "Login:";
            margin-bottom: 5;
            vexpand: true;

            styles [
              "login-title-label",
            ]

            layout {
              column: "0";
              column-span: "2";
              row: "0";
            }
          }

          Label error_label {
            label: "ERROR";
            margin-top: 5;
            visible: false;

            styles [
              "error-message-label",
            ]

            layout {
              column: "0";
              column-span: "2";
              row: "4";
            }
          }

          Entry device_entry {
            margin-start: 6;
            placeholder-text: "My Awesome Computer";
            secondary-icon-name: "dialog-question-symbolic";
            truncate-multiline: true;
            width-chars: 18;
            icon-release => $device_help_clicked() swapped;
            changed => $login_form_changed() swapped;
            activate => $login_form_submit() swapped;

            layout {
              column: "1";
              row: "3";
            }

            Popover device_entry_popover {
              child: Label {
                accessible-role: tooltip;
                label: "This is the human readable name that will show up in the API key section of the SimpleLogin website.";
                max-width-chars: 30;
                wrap: true;
              };
            }
          }

          Label {
            label: "Device:";
            xalign: 0.0;

            layout {
              column: "0";
              row: "3";
            }
          }

          Label {
            label: "Email:";
            xalign: 0.0;

            layout {
              column: "0";
              row: "1";
            }
          }

          Label {
            label: "Password:";
            xalign: 0.0;

            layout {
              column: "0";
              row: "2";
            }
          }

          Entry email_entry {
            hexpand: true;
            input-purpose: email;
            margin-start: 6;
            receives-default: true;
            truncate-multiline: true;
            changed => $login_form_changed() swapped;
            activate => $login_form_submit() swapped;

            layout {
              column: "1";
              row: "1";
            }
          }

          PasswordEntry password_entry {
            hexpand: true;
            margin-start: 6;
            show-peek-icon: true;
            changed => $login_form_changed() swapped;
            activate => $login_form_submit() swapped;

            layout {
              column: "1";
              row: "2";
            }
          }

          Button login_button {
            halign: center;
            label: "Login";
            margin-top: 5;
            sensitive: false;
            valign: center;
            clicked => $login_form_submit() swapped;

            layout {
              column: "0";
              column-span: "2";
              row: "5";
            }
          }

          styles [
            "login-form-warpper",
          ]
        }

        Label {
          halign: center;
          justify: center;
          label: "- or -";
        }

        Box {
          halign: start;
          hexpand: true;
          margin-bottom: 10;
          margin-end: 10;
          margin-start: 10;
          margin-top: 10;
          orientation: vertical;
          valign: center;

          Label {
            hexpand: true;
            label: "Set API Key:";
            margin-bottom: 5;

            styles [
              "login-title-label",
            ]
          }

          PasswordEntry api_key_entry {
            hexpand: true;
            margin-end: 3;
            margin-start: 8;
            show-peek-icon: true;
            width-chars: 27;
            changed => $api_key_form_changed() swapped;
            activate => $api_key_form_submit() swapped;
          }

          Button api_key_button {
            halign: center;
            label: "Accept";
            margin-top: 5;
            sensitive: false;
            clicked => $api_key_form_submit() swapped;
          }
        }
      }

      Label {
        label: "Forgot your password? Reset it <a href=\"https://app.simplelogin.io/auth/forgot_password\">here</a>.";
        margin-bottom: 5;
        use-markup: true;
        valign: start;
        vexpand: true;
        yalign: 0.0;
      }

      Label {
        label: "Don\'t have an account? You can register <a href=\"https://app.simplelogin.io/auth/register\">here</a>.";
        margin-bottom: 10;
        use-markup: true;
        valign: start;
        vexpand: true;
        yalign: 0.0;
      }
    };

    [overlay]
    Box loading_overlay {
      orientation: vertical;
      visible: false;

      Spinner {
        spinning: true;
        valign: end;
        vexpand: true;

        styles [
          "loading-label",
        ]
      }

      Label {
        label: "Loading...";
        valign: start;
        vexpand: true;

        styles [
          "loading-label",
        ]
      }

      styles [
        "loading-label",
      ]
    }
  }
}