<div id="container" class="mui-panel">
  <h2>Weather</h2>
  <div class="mui-row">
    <div class="mui-col-md-12">Currently: <%= data.weather.currently %></div>
  </div>
  <div class="mui-row">
    <div class="mui-col-md-12">Today: <%= data.weather.today %></div>
  </div>
  <div class="mui-row">
    <div class="mui-col-md-12">Later: <%= data.weather.later %></div>
  </div>

  <% if (data.weather.alerts.length > 0) {
  for (var i = 0; i < data.weather.alerts.length; i++) {
  %>

  <div class="mui-row">
    <div class="mui-col-md-12 mui--text-danger"><%= data.weather.alerts[i].title %></div>
    <div class="mui-col-md-12"><%= data.weather.alerts[i].description %></div>
  </div>

  <%
  }
  } %>

</div>
