{% macro navbar(services, topics, params, active='services') %}
    <div data-role="navbar">
      <ul>
        {% if services %}
        <li><a href="#services" {% if 'services'==active %} class="ui-btn-active ui-state-persist" {% else %} class="" {% endif %} >Services</a></li>
        {% endif %}
        {% if topics %}
        <li><a href="#topics" {% if 'topics'==active %} class="ui-btn-active ui-state-persist" {% else %} class="" {% endif %} >Topics</a></li>
        {% endif %}
        {% if params %}
        <li><a href="#params" {% if 'params'==active %} class="ui-btn-active ui-state-persist" {% else %} class="" {% endif %} >Params</a></li>
        {% endif %}
      </ul>
    </div>
{% endmacro %}

{% macro content_navbar() %}
    <div data-role="navbar">
      <ul>
        <li><a href="#" data-rel="back" data-icon="back">Back</a></li>
      </ul>
    </div>
{% endmacro %}

{% macro dynamic_array_input(fielddict) %}
  //to match the pattern in DOM
  idx = function (n, i) { return n + '-' + i ; }
  {% for name, type in fielddict.iteritems() %}
    {% if type[-2:] == '[]' %}
      $('#{{ name }}_btnAdd').click( function() {
          $('#{{ name }}_btnDel').removeAttr('disabled').button('enable'); // enable the "del" button

          // how many "duplicatable" input fields we currently have
          var num = $('.{{ name }}_clonedInput').length;

          // the numeric ID of the new input field being added
          var newNum  = new Number(num + 1);
          var newElem = $('#'+idx('div{{ name }}', num)).clone().attr('id', idx('div{{ name }}', newNum));

          newElem.children(':first').attr( 'for', idx('{{ name }}', newNum) ) // label
          newElem.find('#'+idx('{{ name }}', num)).attr( 'id', idx('{{ name }}', newNum) ).attr('name', idx('{{ name }}', newNum));//input, even embedded in jquery mobile divs
          $('#'+idx('div{{ name }}', num)).after(newElem);

          // business rule: limit the number of fields to 5
          if (newNum == 5) {
               $('#{{ name }}_btnAdd' ).attr('disabled', 'disabled').button('disable');
               $('#{{ name }}_btnAdd').parent().find('.ui-btn-text').text('maximum fields reached');
          }

          return false; // cancel original event
      });

      $( '#{{ name }}_btnDel' ).click( function() {
          // how many "duplicatable" input fields we currently have
          var num = $( '.{{ name }}_clonedInput' ).length;

          // remove the last element
          $('#'+idx('div{{ name }}', num )).remove();

          // enable the "add" button, since we've removed one
          $('#{{ name }}_btnAdd').removeAttr('disabled').button('enable');
          $('#{{ name }}_btnAdd').parent().find('.ui-btn-text').text('add another name');

          // if only one element remains, disable the "remove" button
          if ( num-1 == 1 )
          $('#{{ name }}_btnDel' ).attr('disabled', 'disabled').button('disable');

          return false; // cancel original event
      });
    {% endif %}
  {% endfor %}
{% endmacro %}

{% macro generate_inputs(fielddict) %}
  {% for name, type in fielddict.iteritems() %}
    <div class="ui-field-contain">
      <label for="{{ name }}">{{ name }}</label>

    {% if type=='bool' %}
      <input type=checkbox name="{{ name }}" id="{{ name }}"/>

    {% elif type=='float32' %}
      <input type=number name="{{ name }}" id="{{ name }}"/>

    {% elif type=='int32' %}
      <input type=number name="{{ name }}" id="{{ name }}"/>

    {% elif type=='uint8' %}
      <input type=number name="{{ name }}" id="{{ name }}"/>

    {% elif type=='std_msgs/Header' %}
      <div class="ui-field-contain">
        <label for="{{ name }}.stamp.secs">{{ name }}.stamp.secs:</label>
        <input type=number name="{{ name }}_stamp_secs" id="{{ name }}_stamp_secs"/>
      </div>
      <div class="ui-field-contain">
        <label for="{{ name }}.stamp.nsecs">{{ name }}.stamp.nsecs:</label>
        <input type=number name="{{ name }}_stamp_nsecs" id="{{ name }}_stamp_nsecs"/>
      </div>
      <div class="ui-field-contain">
        <label for="{{ name }}.frame_id">{{ name }}.frame_id:</label>
        <input type=number name="{{ name }}_frameid" id="{{ name }}_frameid"/>
      </div>
      <div class="ui-field-contain">
        <label for="{{ name }}.seq">{{ name }}.seq:</label>
        <input type=number name="{{ name }}_seq" id="{{ name }}_seq"/>
      </div>

    {% elif type=='geometry_msgs/Vector3' %}
      <div class="ui-field-contain">
        <label for="{{ name }}.x">{{ name }}.x:</label>
        <input type=number name="{{ name }}_x" id="{{ name }}_x"/>
      </div>
      <div class="ui-field-contain">
        <label for="{{ name }}.y">{{ name }}.y:</label>
        <input type=number name="{{ name }}_y" id="{{ name }}_y"/>
      </div>
      <div class="ui-field-contain">
        <label for="{{ name }}.z">{{ name }}.z:</label>
        <input type=number name="{{ name }}_z" id="{{ name }}_z"/>
      </div>

    {% elif type=='string' %}
      <input type=text name="{{ name }}" id="{{ name }}"/>

    {% elif type=='string[]' %}
      <div id="div{{ name }}-1" class="ui-field-contain {{ name }}_clonedInput">
        <label for="{{ name }}-1"></label>
        <input type=text name="{{ name }}-1" id="{{ name }}-1"/>
      </div>

      <div class="ui-field-contain">
        <label></label>
        <input id="{{ name }}_btnAdd" type="button" value="ADD">
        <label></label>
        <input id="{{ name }}_btnDel" type="button" value="REMOVE">
      </div>

    {% else %}
      <input type=text name="{{ name }}" id="{{ name }}" placeholder="UNIMPLEMENTED MSG FIELD TYPE {{ type }}">

    {% endif %}
    </div>
  {% endfor %}
{% endmacro %}

{% macro generate_msgdata(fielddict) %}
  msgdata = {}
  {% for name, type in fielddict.iteritems() %}

    {% if type=='bool' %}
    msgdata['{{ name }}'] = $('#{{ name }}').is(":checked")

    {% elif type=='float32' %}
    msgdata['{{ name }}'] = parseInt($('#{{ name }}').val())

    {% elif type=='int32' %}
    msgdata['{{ name }}'] = parseInt($('#{{ name }}').val())

    {% elif type=='uint8' %}
    msgdata['{{ name }}'] = parseInt($('#{{ name }}').val())

    {% elif type=='geometry_msgs/Vector3' %}
    msgdata['{{ name }}'] = {}
    msgdata['{{ name }}']['x'] = parseInt($('#{{ name }}_x').val())
    msgdata['{{ name }}']['y'] = parseInt($('#{{ name }}_y').val())
    msgdata['{{ name }}']['z'] = parseInt($('#{{ name }}_z').val())

    {% elif type=='string' %}
    msgdata['{{ name }}'] = $('#{{ name }}').val()

    {% elif type=='string[]' %}
    msgdata['{{ name }}']=[]
    for (idx=1; idx <= $( '.{{ name }}_clonedInput' ).length; idx++) {
      var val=$('#{{ name }}-' + idx).val()
      if (val!='') {
        msgdata['{{ name }}'].push( val )
      }
    }

    {% else %}
    msgdata['{{ name }}'] = $('#{{ name }}').val()

    {% endif %}
  {% endfor %}
{%endmacro %}