index.html.twig

{% extends 'base.html.twig' %}

{% block title %}Spotify playlist generator{% endblock %}

{% block content %}

    <form class="clearfix mt-2" action="{{ path('generate-quick-playlist') }}">
      <div class="row">
        <div class="col-md-12">
          <legend>Quick playlist generator:</legend>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 col-sm-12">
          <div>
            <input
              type="checkbox"
              class="custom-control-input"
              id="check-quick-create-long-playlist"
              name="check-quick-create-long-playlist"
              value="long-playlist"
              checked
            >
            <label class="custom-control-label" for="check-quick-create-long-playlist">
              Generate a long playlist (x2)
            </label>
          </div>
        </div>
        <div class="col-md-6 col-sm-12">
          <div class="btn-group float-end" role="group" aria-label="Action buttons">
            <button name="generate-quick-playlist-from-daily-mixes" type="submit" class="btn btn-secondary">🎶 Mix daily mixes!</button>
            <button name="generate-quick-playlist-tambouille-mix" type="submit" class="btn btn-primary">🎶 Pick nice tracks!</button>
          </div>
        </div>
      </div>
    </form>

    <form class="clearfix mt-2" action="{{ path('generate-playlist-from-top-artists') }}">
      <div class="row">
        <div class="col-md-8 col-sm-12">
          <legend>Generate playlist from artists:</legend>
        </div>
        <div class="col-md-4 col-sm-12">
          <div class="btn-group float-end" role="group" aria-label="Action buttons">
            <button name="pick-random-artist" type="button" class="btn btn-link" onclick="window.pickRandomArtists()">🎲 Pick random artists</button>
          </div>
        </div>
      </div>
      <ul class="list-unstyled row row-cols-md-4 row-cols-2" id="user-top-artists">

      </ul>
      <div class="row">
        <div class="col-md-8 col-sm-12">
          <div>
            <input
              type="checkbox"
              class="custom-control-input"
              id="check-top-artist-filter-artists"
              name="check-top-artist-filter-artists"
              value="filter-artists"
              checked
            >
            <label class="custom-control-label" for="check-top-artist-filter-artists">
              Allow only selected artists in recommendations
            </label>
          </div>
          <div>
            <input
              type="checkbox"
              class="custom-control-input"