<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="main.css">
  <script type="module">
    import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
    window.Stimulus = Application.start()

    Stimulus.register("mood", class extends Controller {
      static targets = [ "image" ]

      showMode(event) {
        const image = this.imageTarget
        image.src = event.target.dataset.mode + ".jpg"
      }

      showCurrent() {
        const image = this.imageTarget
        image.src = "<%= @mode %>.jpg"
      }

    })
  </script>
</head>
<main data-controller="mood">
  <div class="mode">
    <img data-mood-target="image" src="<%= @mode %>.jpg">
  </div>
  <div class="tracker">
    <div class="title">
      <h1>Comment il va le Robi ?</h1>
    </div>
    <div class="moods">
      <div class="log">
        <% @mood_log.each do |week| %>
          <div class="week">
            <% week.each do |d| %>
              <% if d[1] %>
                <div data-mode="<%= d[1] %>" data-action="mouseover->mood#showMode mouseleave->mood#showMode" title="<%= d[0] %> : <%= d[1] %>" class="day <%= d[1] %>"></div>
              <% else %>
                <div class="day"></div>
              <% end %>
            <% end %>
          </div>
        <% end %>
      </div>
    </div>
    <div class="legend">
      <div class="legend-mood">
        <div class="bar-frigo"></div>
        <div class="bar-explain">Triste</div>
      </div>
      <div class="legend-mood">
        <div class="bar-en-charge"></div>
        <div class="bar-explain">En charge</div>
      </div>
      <div class="legend-mood">
        <div class="bar-croisiere"></div>
        <div class="bar-explain">Croisiere</div>
      </div>
      <div class="legend-mood">
        <div class="bar-creatif"></div>
        <div class="bar-explain">Créatif</div>
      </div>
    </div>
  </div>
</main>
