let

  Switch = name: topic: {
    title         = name;
    type          = "switch";
    icon          = "icons/power_button.png";
    topic.get     = topic;
    topic.set     = "${topic}/set";
    transform.get = "return (message.state == 'ON') ? true : false";
    transform.set = "return JSON.stringify({state: (input) ? 'ON' : 'OFF'})";
  };

  Slider = name: topic: {
    title           = name;
    type            = "slider";
    icon            = "icons/bulb.png";
    sliderMinValue  = 0;
    sliderMaxValue  = 254;
    sliderStepValue = 1;
    topic.get       = topic;
    topic.set       = "${topic}/set";
    transform.get   = "return message.brightness";
    transform.set   = "return JSON.stringify({brightness: Number(input)})";
  };

  Number = name: topic: {
    title           = name;
    type            = "number";
    icon            = "icons/bulb.png";
    sliderMinValue  = 0;
    sliderMaxValue  = 254;
    sliderStepValue = 1;
    topic.get       = topic;
    topic.set       = "${topic}/set";
    transform.get   = "return message.brightness";
    transform.set   = "return JSON.stringify({brightness: Number(input)})";
  };

in {

  appName     = "Smart-Home";
  disableAuth = false;
  extraCSS    = "./test.css";
  pages =  [
    {
      id        = "mainpage";
      icon     = "favicon-512x512.png";
      title    = "Some Title";
      sections = [
        {
          title = "Sub-Pages";
          items = [
            {
              title = "Click me!";
              type = "text";
              icon = "icons/electric_range.png";
              link = "#page1";
            }
          ];
        }

       {
          title = "Available Elements:";
          items = [
            (Switch "Switch" "zigbee2mqtt/ikea_lamp_l")
            (Slider "Slider" "zigbee2mqtt/ikea_lamp_l")
            (Number "Number" "zigbee2mqtt/ikea_lamp_l")

            {
              title         = "Buttons";
              type          = "button";
              icon          = "icons/bulb.png";
              buttons       = [
                {
                  label = "On";
                  value = "ON";
                }
                {
                  label = "Off";
                  value = "OFF";
                }
              ];
              topic.get     = "zigbee2mqtt/ikea_lamp_l_rgb";
              topic.set     = "zigbee2mqtt/ikea_lamp_l_rgb/set";
              transform.get = "return message.state;";
              transform.set = "return JSON.stringify({state: input});";
            }

            {
              title           = "Select";
              type            = "select";
              icon            = "icons/bulb.png";
              topic.get       = "zigbee2mqtt/ikea_lamp_l_rgb";
              topic.set       = "zigbee2mqtt/ikea_lamp_l_rgb/set";
              transform.get   = "return message.color.x + ','+message.color.y";
              transform.set   = "return JSON.stringify({color: {x: input.split(',')[0], y: input.split(',')[1]}})";
              selectOptions   = [
                {
                  label = "Red";
                  value = "0.71,0.26";
                }
                {
                  label = "Green";
                  value = "0.19,0.78";
                }
                {
                  label = "Blue";
                  value = "0.09,0.13";
                }
              ];
            }

            {
              title     = "Text";
              type      = "text";
              topic     = "lacrosse2mqtt/5";
              icon      = "icons/temperature.png";
              transform = "return Math.round((message.temperature + Number.EPSILON) * 100) / 100 + ' °C - ' + message.humidity + ' %'";
            }

            {
              type = "html";
              html = "this is html! <b>bold</b> <u>underline</u><h1>H1</h1>";
            }
          ];
        }
      ];
    }

    {
      id       = "page1";
      icon     = "favicon-512x512.png";
      title    = "I'm a sub-page!";
      sections = [
        {
          title = "Power-Meter";
          items = [
            {
              title     = "Voltage";
              type      = "text";
              topic     = "sdm2mqtt/leah";
              icon      = "icons/power.png";
              transform = "return Math.round((message.voltage + Number.EPSILON) * 100) / 100 + ' V'";
            }
            {
              title     = "Power";
              type      = "text";
              topic     = "sdm2mqtt/leah";
              icon      = "icons/power.png";
              transform = "return Math.round((message.power + Number.EPSILON) * 100) / 100 + ' W'";
            }
            {
              title     = "Frequency";
              type      = "text";
              topic     = "sdm2mqtt/leah";
              icon      = "icons/power.png";
              transform = "return message.frequency + ' Hz'";
            }
            {
              title     = "cos φ";
              type      = "text";
              topic     = "sdm2mqtt/leah";
              icon      = "icons/power.png";
              transform = "return Math.round((message.cosphi + Number.EPSILON) * 100) / 100";
            }
            {
              title     = "Total Import";
              type      = "text";
              topic     = "sdm2mqtt/leah";
              icon      = "icons/power.png";
              transform = "return Math.round((message.import + Number.EPSILON) * 100) / 100 + ' kWh'";
            }
          ];
        }
      ];
    }

  ];

}