{
  config,
  lib,
  pkgs,
  ...
}: let
  cfg = config.marleyos.programs.wlogout;
in {
  options.marleyos.programs.wlogout.enable = lib.mkEnableOption "wlogout";

  config = lib.mkIf cfg.enable {
    marleyos.programs.hyprlock.enable = true;

    programs.wlogout = {
      enable = true;

      layout = let
        systemctl = lib.getExe' pkgs.systemd "systemctl";
        hyprctrl =
          lib.getExe' config.wayland.windowManager.hyprland.package "hyprctrl";
        hyprlock = lib.getExe config.programs.hyprlock.package;
      in [
        {
          label = "lock";
          action = "sleep 1; ${hyprlock}";
          text = "lock";
          keybind = "l";
        }
        {
          label = "logout";
          action = "sleep 1; ${hyprctrl} dispatch exit";
          text = "exit";
          keybind = "e";
        }
        {
          label = "reboot";
          action = "sleep 1; ${systemctl} reboot";
          text = "reboot";
          keybind = "r";
        }
        {
          label = "shutdown";
          action = "sleep 1; ${systemctl} poweroff";
          text = "shutdown";
          keybind = "s";
        }
        {
          label = "suspend";
          action = "sleep 1; ${systemctl} suspend";
          text = "suspend";
          keybind = "u";
        }
        {
          label = "hibernate";
          action = "sleep 1; ${systemctl} hibernate";
          text = "hibernate";
          keybind = "h";
        }
      ];

      style = with config.lib.stylix.colors.withHashtag;
        lib.concatStrings [
          #css
          ''
            @define-color base05 ${base05};
            @define-color base0B ${base0B};
          ''
          # css
          ''
            * {
              font-family: ${config.stylix.fonts.monospace.name};
              background-image: none;
              transition: 20ms;
            }

            window {
              background-color: rgba(12, 12, 12, 0.1);
            }

            button {
              color: @base05;
              font-size: 20px;
              background-repeat: no-repeat;
              background-position: center;
              background-size: 25%;
              border-style: solid;
              background-color: rgba(12, 12, 12, 0.3);
              border: 3px solid @base05;
              box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            }

            button:focus, button:active, button:hover {
              color: @base0B;
              background-color: rgba(12, 12, 12, 0.5);
              border: 3px solid @base0B;
            }

            #lock {
              margin: 10px;
              border-radius: 20px;
              background-image: image(url("${./lock.png}"));
            }
            #logout {
              margin: 10px;
              border-radius: 20px;
              background-image: image(url("${./logout.png}"));
            }
            #reboot {
              margin: 10px;
              border-radius: 20px;
              background-image: image(url("${./reboot.png}"));
            }
            #shutdown {
              margin: 10px;
              border-radius: 20px;
              background-image: image(url("${./shutdown.png}"));
            }
            #suspend {
              margin: 10px;
              border-radius: 20px;
              background-image: image(url("${./suspend.png}"));
            }
            #hibernate {
              margin: 10px;
              border-radius: 20px;
              background-image: image(url("${./hibernate.png}"));
            }
          ''
        ];
    };
  };
}