{% extends "almanac/base.html" %}

{% block title %} Almanac - {{chart}} {% endblock %}
{% block javascript %}<link rel="stylesheet" href="{{MEDIA_URL}}css/almanac.css" type="text/css">{% endblock %}
{% block content %}
<td valign="top" bgcolor="white" width="565" colspan="2">
  <div style="padding-left:12px; padding-right:12px; padding-top:12px; margin-left:1em;">
  <h1 style=" margin-top:1em;">Almanac</h1>
  <h3>{{chart.place}} tides for {{full_date|date:"F"}} {{chart.year}}</h3>
  <p>Tides and astronomical data provided by NOAA</p>
  <p><a href="#{{today}}">Go to today</a></p>
  {% load typogrify humanize almanac_tags %}
	<div id="seasonal-guide" class="first">
		{% for day in first_day_set %}
		<table id="guide">
			<tr class="sg-row" valign="top">
			  {% show_tide_day_as_box day %}
			</tr>
		</table>
		{% endfor %}
	</div>
	<div id="seasonal-guide" class="second" >
		{% for day in second_day_set %}
		<table id="guide">
			<tr class="sg-row" valign="top">
			  {% show_tide_day_as_box day %}
			</tr>
		</table>
		{% endfor %}
	</div>
	{% if naut_twil_am %}
	<div id="sesaonal-guide">
	  <p class="naut_twil">Beginning this week, Nautical Twilight (Sun 12º below horizon) begins at {% bold_afternoon_time naut_twil_am "%-I:%M" %} and ends at {% bold_afternoon_time naut_twil_pm "%-I:%M" %}.</p>
	</div>
	{% endif %}
</div>

  {% load typogrify humanize %}
	<table id="guide" cellpadding=3 border=1 class="tide_chart" summary="Tide times and heights for {{chart.place}} in the year {{chart.year}}">
		<colgroup>
			<col class="time">
			<col class="vzebra-odd" span="2">
			<col class="vzebra-even" span="2">
			<col class="vzebra-odd" span="2">
			<col class="vzebra-even" span="2">
		<thead>
	        <tr><th colspan=1>Date</th><th colspan=2>Tide 1</th><th colspan=2>Tide 2</th><th colspan=2>Tide 3</th><th colspan=2>Tide 4</th><th colspan=2>Sun</th><th colspan=2>Moon</th></tr>
		<tr><th>{{month}}</th><th>time</th><th>hgt</th><th>time</th><th>hgt</th><th>time</th><th>hgt</th><th>time</th><th>hgt</th><th>Rise</th><th>Set</th><th>Phase</th><th>Time</th></tr>
		</thead>
		<tbody>
		  {% load almanac_tags %}
		{% for day in days.all %}
		<table id="guide">
			<tr class="sg-row" valign="top">
			  {% show_tide_day_as_box day %}
			</tr>
		</table>
		{% endfor %}
		  {% for td in days.all %}
		  <tr id="{{td.day.date}}" style="{% cycle 'background:#eee;' 'background:#cdd;' %} {% ifequal td.day.date today %}background:yellow;{%endifequal%}">
		    <td>{{td.day.date|date:"j"}}</td>
		    <td>{% bold_afternoon_time td.tide_1.time "%-I:%M"%}</td><td>{{td.tide_1.level|floatformat}}</td>
		    <td>{% bold_afternoon_time td.tide_2.time "%-I:%M"%}</td><td>{{td.tide_2.level|floatformat}}</td>
		    <td>{% bold_afternoon_time td.tide_3.time "%-I:%M"%}</td><td>{{td.tide_3.level|floatformat}}</td>
		    {% if td.tide_4 %}<td>{% bold_afternoon_time td.tide_4.time "%-I:%M" %}</td><td>{{td.tide_4.level|floatformat}}{% else %}<td colspan=2>---</td>{% endif %}</td>
		    <td>{% bold_afternoon_time td.day.sunrise "%-I:%M" %}</td>
		    <td>{% bold_afternoon_time td.day.sunset "%-I:%M" %}</td>
		    <td>{% ifnotequal td.day.get_moonphase_display None %}{{td.day.get_moonphase_display}}{% endifnotequal %}</td>
		    <td>{% bold_afternoon_time td.day.moonphase_time "%-I:%M" %}</td>
		  </tr>
		  {% endfor %}
		</tbody>
	 </table>
  <p><a href="{% url al-tide-index %}" alt="Tide charts">Back to chart list</a></p>
</td></tr>
{% endblock %}
