$def with(m_vals)

$var title: OpenSprinkler Pi MQTT options
$var page: plugins
<style>
col1  { 
      text-transform: none;
      width: 30%;
      font-size: 1.0em;
      }
col1a { width:5%
        font-size: 1.0em;
      }
col2  {
text-transform: none;
      width: 50%;
      font-size: 1.0em;
      }
col2a { width:15%
        font-size: 1.0em;
      }
row   { 
        padding-top: 15px;
        padding-bottom: 15px;
      } 
commnt {
        font-size: 0.7em;
        }
plugin  {
        font-size: 60%;
        }
</style>
<script>
    // Initialize behaviors
    jQuery(document).ready(function(){

        jQuery("#cSubmit").click(function() {
            jQuery("#pluginForm").submit();
        });
        jQuery("button#cCancel").click(function(){
            window.location="/";
        });

    });
</script>

<div id="plugin">
    <div class="title">MQTT messaging</div>
    <p>This plugin configures MQTT message sending. For this plugin you need an MQTT broker accessible on your network, 
and the notify_change plugin to notify changes and send the MQTT messages.</p>
    <form id="pluginForm" action="/umqta" method="get">
        <table class="optionList">
              <tr id=row>
                  <td id=col1>Send MQTT message after:</td>
                  <td>&nbsp;</td>
                  <td id=col2>MQTT topic for :</td>
              </tr>
            <tr id=row>
                <td style='text-transform: none;'>&nbsp;&nbsp;-someone logs in:</td>
                <td>
                    <input name='mqtlg' type = 'checkbox'$(" checked" if m_vals['mqtlg'] == "on" else "")>
               </td>
                <td style='text-transform: none;'>&nbsp;&nbsp;-somone logged in messages. Default {OSPi name}/lg</td>
                <td>
                    <input name='mqtlgtopic' type='text' value=$m_vals['mqtlgtopic']>
                </td>
            </tr>

              <tr id=row>
                <td  id=col1 >&nbsp;&nbsp;-zones change:</td>
                <td  id=col1a>
                    <input name='mqtzc' type='checkbox'$(" checked" if m_vals['mqtzc'] == "on" else "")>   
                </td>
                <td  id=col2>&nbsp;&nbsp;-zone change messages. Default {OSPi name}/zc</td>
                <td  id=col2a>
                    <input name='mqtzctopic' type='text' value=$m_vals['mqtzctopic']>
                </td>

            </tr>
            <tr id=row> 
            
                <td style='text-transform: none;'>&nbsp;&nbsp;-when controller changes:</td>
                <td> 
                    <input name='mqtcc' type='checkbox'$(" checked" if m_vals['mqtcc'] == "on" else "")>
                </td>
                <td style='text-transform: none;'>&nbsp;&nbsp;-controller change messages. Default {OSPi name}/cc</td>
                <td>
                    <input name='mqtcctopic' type='text' value=$m_vals['mqtcctopic']>
                </td>

            </tr>

            <tr id=row>
                <td style='text-transform: none;'>&nbsp;&nbsp;-options change:</td>
                <td>
                    <input name='mqtoc' type = 'checkbox'$(" checked" if m_vals['mqtoc'] == "on" else "")>
               </td>
                <td style='text-transform: none;'>&nbsp;&nbsp;-options change messages. Default {OSPi name}/oc</td>
                <td>
                    <input name='mqtoctopic' type='text' value=$m_vals['mqtoctopic']>
                </td>
            </tr>

            <tr id=row>
                <td style='text-transform: none;'>&nbsp;&nbsp;-when system reboots:</td>
                <td>
                    <input name='mqtrb' type='checkbox'$(" checked" if m_vals['mqtrb'] == "on" else "")>   
                </td>
                <td style='text-transform: none;'>&nbsp;&nbsp;-system reboot messages. Default {OSPi name}/rb</td>
                <td>
                    <input name='mqtrbtopic' type='text' value=$m_vals['mqtrbtopic']>
                </td>
            </tr>

            <tr id=row>
                <td style='text-transform: none;'>&nbsp;&nbsp;-station names change:</td>
                <td>
                    <input name='mqtsc' type = 'checkbox'$(" checked" if m_vals['mqtsc'] == "on" else "")>
               </td>
                <td style='text-transform: none;'>&nbsp;&nbsp;-station name change messages. Default {OSPi name}/sc</td>
                <td>
                    <input name='mqtsctopic' type='text' value=$m_vals['mqtsctopic']>
                </td>
            </tr>

            <tr id=row>
                <td style='text-transform: none;'>&nbsp;&nbsp;-program changes:</td>
                <td>
                    <input name='mqtpc' type = 'checkbox'$(" checked" if m_vals['mqtpc'] == "on" else "")>
               </td>
                <td style='text-transform: none;'>&nbsp;&nbsp;-program change messages. Default {OSPi name}/pc</td>
                <td>
                    <input name='mqtpctopic' type='text' value=$m_vals['mqtpctopic']>
                </td>
            </tr>
            <tr id=row>
                <td id=commnt>&nbsp;</td>
                <td id=commnt>&nbsp;</td>
                <td id=commnt>(Program change means change to configuration, deleting a 
                 program, and toggling a program on/off)
                </td>
            </tr>

            <tr id=row>
               <td id=commnt>&nbsp;</td>
            </tr>

            <tr id=row>
                
                <td id=col1>Your MQTT Brokers hostname or IP:</td>
                <td>&nbsp;</td>
                <td id=col2a>
                    <input name='mqthost' type='text' value=$m_vals["mqthost"]>
                </td>
             </tr>
             <tr id=row>
                <td id=col1>Your MQTT Brokers port:</td>
                <td id=col1a>&nbsp;</td>
                <td id=col2>
                    <input name='mqtport' type='text' value=$m_vals['mqtport']>
                </td>
            </tr>
          
            <tr id=row>
                <td id=commnt>&nbsp;</td>
            </tr>
            <tr id=row>
                <td id=col1>Status:</td>
                <td id=col1a>&nbsp;</td>
                <td id=col2>
                    <textarea style="font-family: monospace;" rows="7" cols="35" readonly>$m_vals['status']</textarea>
                </td>
            </tr>
        </table>
    </form>
</div>
<div id="controls">
    <button id="cSubmit" class="submit"><b>Submit</b></button>
    <button id="cCancel" class="cancel danger">Cancel</button>
</div>