using Gtk 4.0;

template $SLTotpDialog : Window {
  modal: true;
  title: "TOTP Entry";

  Overlay overlay {
    child: form_wrapper;
    halign: center;
    hexpand: true;
    valign: center;
    vexpand: true;

    Grid form_wrapper {
      column-spacing: 5;
      halign: center;
      hexpand: true;
      margin-bottom: 10;
      margin-end: 10;
      margin-start: 10;
      margin-top: 10;
      row-spacing: 5;
      valign: center;
      vexpand: true;

      Box {
        halign: center;
        hexpand: true;

        Image {
          halign: center;
          icon-name: "dialog-password-symbolic";
        }

        Label {
          label: "TOTP";

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

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

      Button accept_button {
        label: "Accept";

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

      Button cancel_button {
        label: "Cancel";

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

      Entry code_entry {
        placeholder-text: "TOTP Code";

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

      Label error_label {
        label: "ERROR";

        styles [
          "error-message-label",
        ]

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

Box loading_overlay {
  orientation: vertical;

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

    styles [
      "loading-label",
    ]
  }

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

    styles [
      "loading-label",
    ]
  }

  styles [
    "loading-label",
  ]
}