using Gtk 4.0;

template $SettingsPanel : Box {
  Overlay overlay {
    hexpand: true;

    child: Box content_wrapper {
      visible: false;
      hexpand: true;
      vexpand: true;

      Grid content {
        hexpand: true;
        row-homogeneous: true;
        valign: start;

        Button profile_image_button {
          has-frame: false;

          Image profile_image {
            halign: center;
            icon-name: "user-info-symbolic";
            icon-size: large;
            margin-end: 5;
            valign: center;
            vexpand: true;
          }

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

        Box {
          Button remove_picture_button {
            halign: start;
            valign: center;
            icon-name: "window-close-symbolic";
            visible: false;
          }

          Entry name_label {
            editable: false;
            can-focus: false;
            has-frame: false;
            hexpand: true;
            input-hints: no_emoji  |  no_spellcheck;
            text: "Testy McTesterface";

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

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

        Box {
          Button edit_button {
            halign: start;
            valign: center;
            label: "Edit";
          }

          Button cancel_edit_button {
            halign: start;
            valign: center;
            visible: false;
            label: "Cancel";
          }
        }

        Label stats_label {
          halign: center;
          hexpand: true;
          label: "Stats go here";

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

        Label email_label {
          hexpand: true;
          label: "mctesterface@test.tld";
          xalign: 0.0;

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

        Button logout_button {
          halign: start;
          label: "Logout";
          valign: center;
          clicked => $logout_clicked() swapped;

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

        Label {
          label: "Account Status:";
          margin-end: 5;
          xalign: 1.0;

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

        Label {
          label: "Api Key:";
          margin-end: 5;
          xalign: 1.0;

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

        PasswordEntry api_key_field {
          editable: false;
          enable-undo: false;
          hexpand: true;
          show-peek-icon: true;
          valign: center;

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

        Label status_label {
          hexpand: true;
          label: "Premium";
          xalign: 0.0;

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

        Button api_key_clear_button {
          halign: start;
          label: "Clear";
          valign: center;
          clicked => $clear_api_key_clicked() swapped;

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

    [overlay]
    Box loading_overlay {
      hexpand: true;
      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",
      ]
    }

    [overlay]
    Box error_overlay {
      hexpand: true;
      orientation: vertical;
      visible: false;

      Box {
        halign: center;
        valign: end;

        Button error_refresh_button {
          halign: center;
          icon-name: "view-refresh-symbolic";
          valign: end;
          vexpand: true;

          styles [
            "loading-label",
          ]
        }

        Button error_close_button {
          halign: center;
          icon-name: "window-close-symbolic";
          valign: end;
          clicked => $close_error_clicked() swapped;

          styles [
            "loading-label",
          ]
        }
      }

      Label error_label {
        label: "ERROR";
        valign: start;
        vexpand: true;

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