using Gtk 4.0;

template $MainPanel : Box {
  Overlay overlay {
    child: Box content_wrapper {
      orientation: vertical;
      vexpand: true;

      Box {
        SearchEntry search_box {
          hexpand: true;
          placeholder-text: "Filter by email, description, etc.";
        }

        DropDown view_dropdown {
          hexpand: true;
          selected: 0;
          model: StringList {
            strings ["All aliases", "Pinned only", "Enabled only", "Disabled only",]    
          };
        }

        Button search_button {
          label: "Search";
        }
      }

      Box {
        Button new_button {
          label: "New";
        }

        Button edit_button {
          label: "Edit";
        }

        Button delete_button {
          label: "Delete";
        }

        Button prev_page_button {
          halign: end;
          hexpand: true;
          icon-name: "go-previous-symbolic";
        }

        Entry page_label {
          has-frame: false;
          input-hints: no_emoji  |  no_spellcheck;
          input-purpose: digits;
          max-width-chars: 0;
          text: "1";
          truncate-multiline: true;
          width-chars: 5;
          xalign: 0.5;
        }

        Button next_page_button {
          icon-name: "go-next-symbolic";
        }
      }

      Overlay scroll_overlay {
        child: ScrolledWindow {
          vexpand: true;

          ListView alias_list_view {
            factory: SignalListItemFactory alias_item_factory {
            };

            model: MultiSelection alias_selection_model {
            };
          }
        };

        [overlay]
        Label no_content_label {
          hexpand: true;
          label: "No more results";
          vexpand: true;

          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;

          styles [
            "loading-label",
          ]
        }
      }

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

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

    [overlay]
    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",
      ]
    }
  }
}