<script type="text/x-red" data-template-name="msg-status">

  <div class="form-row">

    <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>

    <input type="text" id="node-input-name" placeholder="Name">

  </div>

  <div class="form-row">

    <label for="node-input-msgPath"><i class="fa fa-code"></i> Message path</label>

    <input type="text" id="node-input-msgPath" placeholder="msg.payload.state">

  </div>

  <div class="form-row">

    <label for="node-input-prefix">Prefix (optional)</label>

    <input type="text" id="node-input-prefix" placeholder="State:">

  </div>

  <div class="form-row">

    <label for="node-input-suffix">Suffix (optional)</label>

    <input type="text" id="node-input-suffix" placeholder="(live)">

  </div>

  <div class="form-row">

    <label for="node-input-showTime">Show time</label>

    <input type="checkbox" id="node-input-showTime" style="width:auto; vertical-align:middle;">

  </div>

  <div class="form-row">

    <label for="node-input-fill">Status color</label>

    <select id="node-input-fill">

      <option value="blue">Blue</option>

      <option value="green">Green</option>

      <option value="red">Red</option>

      <option value="yellow">Yellow</option>

      <option value="grey">Grey</option>

    </select>

  </div>

  <div class="form-row">

    <label for="node-input-shape">Status shape</label>

    <select id="node-input-shape">

      <option value="dot">Dot</option>

      <option value="ring">Ring</option>

    </select>

  </div>

</script>

<script type="text/x-red" data-help-name="msg-status">

  <p>

    Displays a configurable part of the incoming message in the node status.

  </p>

  <h3>Configuration</h3>

  <dl class="message-properties">

    <dt>Message path

      <span class="property-type">string</span>

    </dt>

    <dd>

      Dot-notation path to the value to display (e.g., <code>msg.payload.state</code>, <code>msg.topic</code>, <code>msg.payload</code>).

      Supports nested paths like <code>msg.data.nested.value</code>.

    </dd>

    <dt>Prefix <span class="property-type">string (optional)</span></dt>

    <dd>Text to prepend to the status value (e.g., "State: ").</dd>

    <dt>Suffix <span class="property-type">string (optional)</span></dt>

    <dd>Text to append to the status value (e.g., " (live)").</dd>

    <dt>Show time <span class="property-type">boolean</span></dt>

    <dd>When enabled, prefixes the status text with the local time of the last received message in <code>HH:MM:SS</code> format.</dd>

    <dt>Status color

      <span class="property-type">string</span>

    </dt>

    <dd>Color of the status indicator: blue, green, red, yellow, or grey.</dd>

    <dt>Status shape

      <span class="property-type">string</span>

    </dt>

    <dd>Shape of the status indicator: dot or ring.</dd>

  </dl>

  <h3>Example</h3>

  <p>

    If a message with <code>msg.payload.state = "active"</code> arrives, and you configure:

  </p>

  <ul>

    <li>Message path: <code>msg.payload.state</code></li>

    <li>Prefix: <code>State:</code></li>

    <li>Color: green</li>

  </ul>

  <p>

    The node status will display: <code>12:34:56 State: active</code> with a green dot.

  </p>

</script>

<script>

  RED.nodes.registerType("msg-status", {

    category: "function",

    color: "#87ceeb",

    defaults: {

      name: {value: ""},

      msgPath: {value: "", required: true},

      prefix: {value: ""},

      suffix: {value: ""},

      showTime: {value: true},

      fill: {value: "blue"},

      shape: {value: "dot"}

    },

    inputs: 1,

    outputs: 1,

    icon: "font-awesome/fa-info-circle",

    label: function() {

      return this.name || (this.msgPath ? "status: " + this.msgPath : "msg-status");

    },

    paletteLabel: "msg status"

  });

</script>