{% extends "core/templates/index.jinja" %}
{% block content %}
<style>
  {% include 'titles/chuni/templates/css/chuni_style.css' %}
</style>
<div class="container">
  {% include 'titles/chuni/templates/chuni_header.jinja' %}
  {% if favorites_by_genre is defined and favorites_by_genre is not none %}
  <div class="row">
    <h1 style="text-align: center;">{{ cur_version_name }}</h1>
    <h4 style="text-align: center;">Favorite Count: {{ favorites_count }}</h4>
    {% for key, genre in favorites_by_genre.items() %}
      <h2 style="text-align: center; padding-top: 32px">{{ key }}</h2>
      {% for favorite in genre %}
      <form id="fav_{{ favorite.idx }}" action="/game/chuni/update.favorite_music_favorites" method="post" style="display: none;">
        <input class="form-control" form="fav_{{ favorite.idx }}" id="musicId" name="musicId" type="hidden" value="{{ favorite.favId }}">
        <input class="form-control" form="fav_{{ favorite.idx }}" id="isAdd" name="isAdd" type="hidden" value="0">
      </form>
      <div class="col-lg-6 mt-3">
        <div class="card bg-card rounded card-hover">
          <div class="card-body row">
            <div class="col-3" style="text-align: center;">
              <img src="img/jacket/{{ favorite.jacket }}" width="100%">
            </div>
            <div class="col scrolling-text">
              <h5 class="card-text"> {{ favorite.title }} </h5>
              <br>
              <h6 class="card-text"> {{ favorite.artist }} </h6>
              <br><br>
              <div style="text-align: right;">
                <input type=submit class="btn btn-secondary btn-fav-remove" type="button" form="fav_{{ favorite.idx }}" value="Remove">
              </div>
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    {% endfor %}
  </div>
  {% endif %}
</div>
<script>
  $(document).ready(function () {
    $('.scrolling-text p, .scrolling-text h1, .scrolling-text h2, .scrolling-text h3, .scrolling-text h4, .scrolling-text h5, .scrolling-text h6').each(function () {
      var parentWidth = $(this).parent().width();
      var elementWidth = $(this).outerWidth();
      var elementWidthWithPadding = $(this).outerWidth(true);

      if (elementWidthWithPadding > parentWidth) {
        $(this).addClass('scrolling');
      }
    });
  });
</script>
{% endblock content %}