{ config, lib, pkgs, ... }:

{
  programs.wlogout = {
    enable = true;
    layout = [
      {
        label = "reboot";
        action = "systemctl reboot";
        text = "Reboot";
        keybind = "r";
      }
      {
        label = "shutdown";
        action = "systemctl poweroff";
        text = "Shutdown";
        keybind = "s";
      }
      {
        label = "logout";
        action = "hyprctl dispatch exit";
        text = "Logout";
        keybind = "l";
      }
    ];
    style = with config.lib.stylix.colors.withHashtag;
      let
        font-family = config.stylix.fonts.sansSerif.name;
        shutdownIcon = ./icons/shutdown.png;
        rebootIcon = ./icons/reboot.png;
        logoutIcon = ./icons/logout.png;
      in ''
        * { font-family: "${font-family}"; }

        window {
          border: none;
          background: transparent;
        }

        button {
          border: ${base0D};
          background-color: alpha(${base00}, 0.8);
          background-repeat: no-repeat;
          background-position: center;
          background-size: 25%;
          box-shadow: none;
          margin: 5px;
          font-size: 20px;
          color: ${base05};
        }

        button:hover {
          background-color: ${base01};
          color: ${base05};
        }

        button:focus {
          background-color: ${base03};
          color: ${base05};
        }

        #shutdown {
          background-image: url("${shutdownIcon}");
        }

        #reboot {
          background-image: url("${rebootIcon}");
        }

        #logout {
          background-image: url("${logoutIcon}");
        }
      '';
  };
}