<% content_for :title, "Letters" %>

<header class="container">
  <div class="grid">
    <div>
      <h1>Letters</h1>
    </div>
    <div class="text-right">
      <%= create_button new_letter_path, "send a letter!" %>
    </div>
  </div>
</header>

<nav class="container">
  <ul class="tabs">
    <li class="tabs__item">
      <%= link_to "Unbatched Letters", letters_path, class: "tabs__link #{params[:view] != 'batched' ? 'tabs__link--active' : ''}" %>
    </li>
    <li class="tabs__item">
      <%= link_to "Batched Letters", letters_path(view: 'batched'), class: "tabs__link #{params[:view] == 'batched' ? 'tabs__link--active' : ''}" %>
    </li>
  </ul>
</nav>

<main class="container">
  <% if params[:view] == 'batched' %>
      <header>
        <h2>Batched Letters</h2>
      </header>
      <% if @batched_letters.any? %>
          <% @batched_letters.each do |batch, letters| %>
          <article class="card">
            <details>
              <summary>
                <div>
                  <strong>Batch #<%= batch.id %></strong>
                  <small><%= pluralize(letters.size, 'letter') %></small>
                  <div class="text-muted">
                    <small>Created <%= time_ago_in_words(batch.created_at) %> ago</small>
                  </div>
                  <div class="mt-2">
                    <span class="text-gray-400">Tags:</span>
                    <%= render 'shared/tags', tags: batch.tags %>
                  </div>
                </div>
              </summary>
              <div class="content">
                <%= render partial: 'batches/letters_collection', locals: { letters: letters } %>
              </div>
            </details>
          </article>
          <% end %>
      <% else %>
        <p class="text-center">No batched letters found.</p>
      <% end %>
  <% else %>
      <header>
        <h2>Unbatched Letters</h2>
      </header>
      <% if @unbatched_letters.any? %>
          <%= render partial: 'batches/letters_collection', locals: { letters: @unbatched_letters } %>
      <% else %>
        <p class="text-center">No unbatched letters found.</p>
      <% end %>
  <% end %>
</main>

<% if params[:view] != 'batched' %>
  <footer class="container">
    <%= paginate @unbatched_letters %>
  </footer>
<% end %>