<div class="banner">
  <div class="celestial-times">
    <div class="celestial-time">
      <div class="celestial-icon">☀️</div>
      <div class="celestial-details">
        <span class="celestial-label">Sunrise</span>
        <span class="celestial-value"><%= session[:sunrise] ? DateTime.parse(session[:sunrise]).strftime("%d %b, %H:%M") : 'not set' %></span>
      </div>
    </div>
    
    <div class="celestial-time">
      <div class="celestial-icon">🌌</div>
      <div class="celestial-details">
        <span class="celestial-label">Sunset</span>
        <span class="celestial-value"><%= session[:sunset] ? DateTime.parse(session[:sunset]).strftime("%d %b, %H:%M") : 'not set' %></span>
      </div>
    </div>
  </div>
</div>

<style>
.banner {
  background: linear-gradient(to right, #2c3e50, #3498db);
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.celestial-times {
  display: flex;
  justify-content: center;
  gap: 3rem;
}

.celestial-time {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 1rem 1.5rem;
  border-radius: 6px;
  backdrop-filter: blur(5px);
}

.celestial-icon {
  font-size: 1.5rem;
  margin-right: 1rem;
}

.celestial-details {
  display: flex;
  flex-direction: column;
}

.celestial-label {
  color: #fff;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.25rem;
  opacity: 0.9;
}

.celestial-value {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 500;
}
</style>

<% @rank = Rank.select(:id, :planet, :type_name, :time, :metal) %>

<%= month_calendar(events: @events, attribute: :start_date, end_attribute: :end_date) do |date, events| %>
  
  <% rank = @rank.find_by(weekday: date.strftime("%A")) %>
  
  <strong><%= date.strftime('%d') %></strong><br>

  <% events.each do |event| %>
    <% if rank.id == event.rank_id %>
      <div class="rank">                
        <p><%= lunar_date(date) %></p>  
      </div>                            

      <div class="rank">
        <strong><%= event.name %></strong>  
        <%= rank.type_name %> ✅<br>
        <%= rank.metal %>
      </div>          
    
      <div class="rank">                                                                                           
        <% @data = hours_for_planet_on_weekday(date) %>                                                            
        <% @data.each do |time_pair| %>                                                                          
          <p title="<%= "#{rank.type_name}s may only be summoned #{rank.time}" %>">                              
            From <%= time_pair[:start_time].strftime('%H:%M') %> to <%= time_pair[:end_time].strftime('%H:%M') %>  
            <% if time_matches_rank?(DateTime.parse(time_pair[:start_time].strftime('%H:%M')), rank.type_name) %>  
              ✅                                                                                           
            <% else %>                                                                                             
              ⛔️                                                                                  
            <% end%>                                                                                               
          </p>                                                                                                   
        <% end %>                                                                                                
      </div>                                                                                                       
    <% end %> 
  <% end %>
<% end %>
