#{param name=location/}
#{param name=temperature/}
#{param name=locations/}

<div class="tutorial" style="padding: 10px">

  <div>

    <form action="@{add()}" method="post" style="float:left">
      <fieldset>
        <div class="controls">
          <div class="input-append">
            <input class="span2" type="text" size="16" name="location" value=""/>
            <button type="submit" class="btn">Add</button>
          </div>
        </div>
      </fieldset>
    </form>

    <div style="clear:both"></div>

  </div>

  <% def id = Math.abs(new java.util.Random().nextInt()); %>
  <div id="${id}" class="accordion">

    <% def index = locations.indexOf(location);
    index = index == -1 ? 0 : index;
    locations.eachWithIndex() { current, i -> %>
    <div class="accordion-group">
      <div class="accordion-heading">
        <a class="accordion-toggle" href="#${current}" data-parent="${id}">${current}</a>
      </div>
      <% def expanded = i == index ? 'in' : ''; %>
      <div id="${current}" class="accordion-body collapse ${expanded}">
        <div class="accordion-inner">
        	<%if (i == index) {%>
        	<p>The weather temperature in ${location} is ${temperature} degrees C</p>
        	<%}%>
        </div>
      </div>
    </div>
    <% } %>

  </div>

</div>