{ config, pkgs, ... }:
let
  wallpaper = ../../assets/wallpaper1.jpg;
  lock = ../../assets/lock.png;
  lock-hover = ../../assets/lock-hover.png;
  shutdown = ../../assets/power.png;
  shutdown-hover = ../../assets/power-hover.png;
  logout = ../../assets/logout.png;
  logout-hover = ../../assets/logout-hover.png;
  reboot = ../../assets/restart.png;
  reboot-hover = ../../assets/restart-hover.png;
in  
{
  programs.wlogout = {
    enable = true;
    layout = [
      {
        label = "lock";
        action = "swaylock -eFLfk -i ${wallpaper}";
        text = "  Lock (L)  ";
        keybind = "l";
      }
      {
        label = "reboot";
        action = "systemctl reboot";
        text = " Reboot (R) ";
        keybind = "r";
      }
      {
        label = "shutdown";
        action = "systemctl poweroff";
        text = "Shutdown (S)";
        keybind = "s";
      }
      {
        label = "logout";
        action = "loginctl terminate-session $(loginctl show-session $(loginctl | grep $USER | awk '{print $1}') -p Id --value)";
        text = " Logout (E) ";
        keybind = "e";
      }
    ];
    style = ''
window {
  font-family: OxProto Nerd Font;
  font-size: 14pt;
      color: #000000; /* text */
  background-color: rgba(40, 40, 40, 0.76);
}

button {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
  border-style: solid;
  border-radius: 4px;
  border-width: 2px;
  border-color: #ebdbb2;
  background-color: rgba(40, 40, 40, 0.76);
  margin: 10px;
  transition:
    box-shadow 0.3s ease-in-out,
    background-color 0.3s ease-in-out;
}

button:hover {
  background-color: rgba(250, 137, 26, 0.3);
  color: #282828;
}

button:focus {
  background-color: #ebdbb2;
  color: #282828;
}

#lock {
  background-image: image(url("${lock}"));
}
#lock:focus {
  background-image: image(url("${lock-hover}"));
}
#lock:hover {
  background-image: image(url("${lock-hover}"));
}

#logout {
  background-image: image(url("${logout}"));
}
#logout:focus {
  background-image: image(url("${logout-hover}"));
}
#logout:hover {
  background-image: image(url("${logout-hover}"));
}


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

#reboot {
  background-image: image(url("${reboot}"));
}
#reboot:focus {
  background-image: image(url("${reboot-hover}"));
}
#reboot:hover {
  background-image: image(url("${reboot-hover}"));
}
'';
};
}