{
  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 = lib.concatStrings [
        (lib.optionalString config.rose-pine.enable
          #css
          ''
            @define-color zero #191724;
            @define-color one #1f1d2e;
            @define-color two #26233a;
            @define-color four #908caa;
            @define-color five #e0def4;
            @define-color seven #524f67;
            @define-color eight #eb6f92;
            @define-color b #31748f;
            @define-color e #f6c177;
            @define-color d #c4a7e7;
            @define-color c #9ccf38;
          '')
        # css
        ''
          * {
            font-family: ${config.marleyos.theme.fonts.monospace.name};
            background-image: none;
            transition: 20ms;
          }

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

          button {
            color: @five;
            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 @five;
            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: @b;
            background-color: rgba(12, 12, 12, 0.5);
            border: 3px solid @b;
          }

          #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}"));
          }
        ''
      ];
    };
  };
}