{ config, pkgs, rice,... }:

{
  home.packages = with pkgs; [
    wlogout
  ];

  home.file.".config/wlogout/style.css".text = ''
    * { all: unset; }

    window {
        font-family: ${rice.font.code.name}, monospace;
        font-size: 12pt;
        color: ${rice.color.foreground}; 
        background-color: rgba(0, 0, 0, ${rice.transparency});
    }

    button {
        transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
        text-shadow: none;
        border: none;
        color: ${rice.color.foreground};
        background-color: ${rice.color.background};
        margin: 5px;
    }

    button:hover {
        color: ${rice.color.blue} ;
    }

    button:focus {
        color: ${rice.color.blue} ;
    }
  '';
  
  home.file.".config/wlogout/layout".text = ''
  {
      "label": "lock",
      "action": "hyprlock",
      "text": "[L]ock",
      "height": 0,
      "width": 0,
      "keybind": "l"
  }
  {
      "label": "reboot",
      "action": "systemctl reboot",
      "text": "[R]eboot",
      "height": 0,
      "width": 0,
      "keybind": "r"
  }
  {
      "label": "shutdown",
      "action": "systemctl poweroff",
      "text": "[S]hutdown",
      "height": 0,
      "width": 0,
      "keybind": "s"
  }
  {
      "label": "logout",
      "action": "hyprctl dispatch exit 0",
      "text": "Lo[g]out",
      "height": 0,
      "width": 0,
      "keybind": "g"
  }
  {
      "label": "suspend",
      "action": "systemctl suspend",
      "text": "S[u]spend",
      "height": 0,
      "width": 0,
      "keybind": "u"
  }
  {
      "label": "hibernate",
      "action": "systemctl hibernate",
      "text": "[H]ibernate",
      "height": 0,
      "width": 0,
      "keybind": "h"
  }
  '';
    # lock               { background-image: image(url("./lock.png"));           }
    # lock:focus         { background-image: image(url("./lock-hover.png"));     }
    # logout             { background-image: image(url("./logout.png"));         }
    # logout:focus       { background-image: image(url("./logout-hover.png"));   }
    # suspend            { background-image: image(url("./suspend.png"));        }
    # suspend:focus      { background-image: image(url("./suspend-hover.png"));  }
    # shutdown           { background-image: image(url("./power.png"));          }
    # shutdown:focus     { background-image: image(url("./power-hover.png"));    }
    # reboot             { background-image: image(url("./restart.png"));        }
    # reboot:focus       { background-image: image(url("./restart-hover.png"));  }
    # hibernate          { background-image: image(url("./hibernate.png"));      }
    # hibernate:hover    { background-image: image(url("./hibernate-hover.png"));}
}