| 26 | | <!DOCTYPE html> |
| 27 | | <html> |
| 28 | | <head> |
| 29 | | <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" |
| 30 | | integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous"> |
| 31 | | <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" |
| 32 | | integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" |
| 33 | | crossorigin="anonymous"></script> |
| 34 | | <title>Track Count Per Genre</title> |
| 35 | | </head> |
| 36 | | <body class="d-flex bg-light"> |
| 37 | | {% include 'sidebar.html' %} |
| 38 | | <div class="container mt-5"> |
| 39 | | <h1 class="text-center mb-4">Track Count Per Genre</h1> |
| 40 | | |
| 41 | | <div class="list-group"> |
| 42 | | {% for row in data %} |
| 43 | | <a href="#" class="list-group-item list-group-item-action"> |
| 44 | | {{ row.genre }} - {{ row.count }} tracks |
| 45 | | </a> |
| 46 | | {% empty %} |
| 47 | | <div class="alert alert-warning" role="alert"> |
| 48 | | No data available. |
| 49 | | </div> |
| 50 | | {% endfor %} |
| 51 | | </div> |
| 52 | | </div> |
| 53 | | </body> |
| 54 | | </html> |
