<div id="mood-modal" class="modal">
  <div class="modal-content">
    <span class="close-button">&times;</span>
    <h2>How are you feeling?</h2>
    <div class="mood-slider-container">
      <input type="range" min="1" max="5" value="3" class="mood-slider" id="mood-slider">
      <div class="mood-labels">
        <span>Sad</span>
        <span>Neutral</span>
        <span>Happy</span>
      </div>
    </div>
    <h2>What have you been up to?</h2>
    <div class="activity-bubbles">
      {% for activity in activities %}
        <div class="activity-bubble" data-activity-id="{{ activity.id }}">{{ activity.name }}</div>
      {% endfor %}
    </div>
    <button id="save-mood-button">Save</button>
  </div>
</div>
