<div class="simple-calendar">
  <div class="calendar-heading">
    <time datetime="<%= start_date.strftime('%Y-%m') %>" class="calendar-title"><%= t('date.month_names')[start_date.month] %> <%= start_date.year %></time>

    <nav>
      <%= link_to t('simple_calendar.previous', default: 'Previous'), calendar.url_for_previous_view %>
      <%= link_to t('simple_calendar.today', default: 'Today'), calendar.url_for_today_view %>
      <%= link_to t('simple_calendar.next', default: 'Next'), calendar.url_for_next_view %>
    </nav>
  </div>

  <table class="table table-striped">
    <thead>
      <tr>
        <% date_range.slice(0, 7).each do |day| %>
          <th style="text-align: center;">
            <% rank = Rank.find_by(planet: planet_for_day(day.strftime("%A"))) %>
            <%= t('date.abbr_day_names')[day.wday] %> <%= celestial_emoji(planet_for_day(day.strftime("%A"))) %>
            <div class="rank-info">
              <%= rank.type_name %>
              <small class="time-hint"><%= rank.time %></small>
            </div>
          </th>
        <% end %>
      </tr>
    </thead>

    <tbody>
      <% date_range.each_slice(7) do |week| %>
        <tr>
          <% week.each do |day| %>
            <%= content_tag :td, class: calendar.td_classes_for(day) do %>
              <div class="date-number"><%= day.day %></div>
              <% if current_time_valid?(day) %>
                <% rank = Rank.find_by(planet: planet_for_day(day.strftime("%A"))) %>
                <% if moon_phase_matches?(day) && rank.present? %>
                  <% spirits = Spirit.joins(:rank)
                                  .where(ranks: { planet: planet_for_day(day.strftime("%A")) })
                                  .order('ranks.type_name') %>
                  <% spirits.each do |spirit| %>
                    <div class="spirit-entry" title="<%= spirit.description %>">
                      <strong><%= spirit.name %></strong>
                      <div class="spirit-abilities"><%= spirit.abilities %></div>
                    </div>
                  <% end %>
                <% end %>
              <% else %>
                <div class="time-invalid">Invalid time for summoning</div>
              <% end %>
            <% end %>
          <% end %>
        </tr>
      <% end %>
    </tbody>
  </table>
</div>

<style>
.rank-info {
  font-size: 0.8em;
  margin-top: 0.2em;
}
.time-hint {
  display: block;
  color: #666;
  font-style: italic;
}
.spirit-entry {
  border-left: 3px solid #ccc;
  margin: 0.5em 0;
  padding: 0.3em;
  font-size: 0.9em;
}
.spirit-abilities {
  font-size: 0.8em;
  color: #666;
}
.time-invalid {
  color: #999;
  font-style: italic;
  font-size: 0.8em;
}
.date-number {
  float: right;
  color: #999;
}
</style>
