app.kluk.fr/app/views/moods/index.html.erb

<main data-controller="mood" class="columns m-auto">
  <div class="current-day column is-hidden-mobile">
    <section class="m-4">
      <figure class="image has-ratio">
        <%= image_tag(@user.current_mode.label + ".jpg", "data-mood-target": "image") %>
      </figure>
    </section>
  </div>
  <section class="section column has-background-primary-light is-flex is-flex-direction-column is-justify-content-space-around">
    <div class="tracker">
      <div class="legend is-flex is-flex-wrap-wrap mb-5">
        <div class="is-flex is-align-items-center mr-4">
          <div class=""><strong>Légende</strong></div>
        </div>
        <% @user.modes.each do |mode| %>
          <div class="is-flex is-align-items-center mr-4">
            <div class="bar mr-1" style="<%= style_for_mode(mode) %>"></div>
            <div class=""><%= mode.label %></div>
          </div>
        <% end %>
      </div>
      <div class="container mb-4 p-3 has-background-white day-info">
        <div class="title is-4">
          <span class="icon"><i class="fa-regular fa-calendar"></i></span>
          <span data-mood-target="modeDay">Aujourd'hui : <%= @user.current_mode.label %></span>
        </div>
      </div>
      <div class="logs">
        <div class="is-flex is-flex-direction-row is-flex-wrap-wrap mb-3">
          <% @user.history.each do |month| %>
            <div class="mr-3">
              <div> <%= I18n.l(month[:month], format: "%b %y").capitalize %></div>
              <div class="is-flex is-flex-wrap-wrap">
                <% month[:weeks].each do |week| %>
                  <div class="is-flex is-flex-direction-column is-flex-wrap-wrap mb-3">
                    <% week.each do |mood| %>
                      <% mode = mode_for(mood, @user) %>
                      <div data-image="<%= asset_path(mode[:label] + ".jpg") %>" data-mode="<%= mode[:label] %>" data-day="<%= l mood[:recorded_at].to_date %>" data-action="click->mood#updateDayInfo" title="<%= l(mood[:recorded_at].to_date) %> : <%= mode[:label] %>" class="day" style="<%= style_for_mode(mode) %>"></div>
                    <% end %>
                  </div>
                <% end %>
              </div>
            </div>
          <% end %>
          <div id="end"></>
        </div>
      </div>
    </div>
  </section>
</main>