<!DOCTYPE html>
<html lang="en">
<head>
    <%- include("partials/head") %>
    <title>Tracks - Doctor Who Leitmotif Catalogue</title>
    <link rel="stylesheet" href="/public/css/tracks.css" />
</head>
<body>
    <div class="container">
        <div class="header">
            <span class="nav"><a href="/">< Home</a></span>
            <span class="title">
                All Tracks
                <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M40 12L43.135 12.1761L46.2306 12.702L49.2478 13.5713L52.1487 14.7729L54.8969 16.2917L57.4577 18.1087L59.799 20.201L61.8913 22.5423L63.7083 25.1031L65.2271 27.8513L66.4287 30.7522L67.298 33.7694L67.8239 36.865L68 40L67.8239 43.135L67.298 46.2306L66.4287 49.2478L65.2271 52.1487L63.7083 54.8969L61.8913 57.4577L59.799 59.799L57.4577 61.8913L54.8969 63.7083L52.1487 65.2271L49.2478 66.4287L46.2306 67.298L43.135 67.8239L40 68L36.865 67.8239L33.7694 67.298L30.7522 66.4287L27.8513 65.2271L25.1031 63.7083L22.5423 61.8913L20.201 59.799L18.1087 57.4577L16.2917 54.8969L14.7729 52.1487L13.5713 49.2478L12.702 46.2306L12.1761 43.135L12 40L12.1761 36.865L12.702 33.7694L13.5713 30.7522L14.7729 27.8513L16.2917 25.1031L18.1087 22.5423L20.201 20.201L22.5423 18.1087L25.1031 16.2917L27.8513 14.7729L30.7522 13.5713L33.7694 12.702L36.865 12.1761L40 12Z" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M40 32L40.8957 32.0503L41.7802 32.2006L42.6422 32.4489L43.4711 32.7922L44.2563 33.2262L44.9879 33.7453L45.6569 34.3431L46.2547 35.0121L46.7738 35.7437L47.2078 36.5289L47.5511 37.3578L47.7994 38.2198L47.9497 39.1043L48 40L47.9497 40.8957L47.7994 41.7802L47.5511 42.6422L47.2078 43.4711L46.7738 44.2563L46.2547 44.9879L45.6569 45.6569L44.9879 46.2547L44.2563 46.7738L43.4711 47.2078L42.6422 47.5511L41.7802 47.7994L40.8957 47.9497L40 48L39.1043 47.9497L38.2198 47.7994L37.3578 47.5511L36.5289 47.2078L35.7437 46.7738L35.0121 46.2547L34.3431 45.6569L33.7453 44.9879L33.2262 44.2563L32.7922 43.4711L32.4489 42.6422L32.2006 41.7802L32.0503 40.8957L32 40L32.0503 39.1043L32.2006 38.2198L32.4489 37.3578L32.7922 36.5289L33.2262 35.7437L33.7453 35.0121L34.3431 34.3431L35.0121 33.7453L35.7437 33.2262L36.5289 32.7922L37.3578 32.4489L38.2198 32.2006L39.1043 32.0503L40 32Z" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>

            </span>
        </div>
        <div class="table-wrap simple-scrollbar">
            <table class="table-sort table-arrows">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th class="appears">Appears</th>
                        <th class="motifs">Motifs</th>
                        <th class="yt disable-sort"></th>
                        <th class="spotify disable-sort"></th>
                    </tr>
                </thead>
                <tbody>
                    <% const motifs = locals.tracks %>
                    <% for (const o of tracks) { %>
                            <tr>
                                <td><a href="/tracks/<%= o.id %>"><%= o.name %></a></td>
                                <td class="appears"><a href="/tracks/<%= o.id %>" tabindex="-1"><%= o.appears %></a></td>
                                <td class="motifs"><a href="/tracks/<%= o.id %>" tabindex="-1"> <% for (const p of o.motifs) { %> <%= p.name %>, <% } %> </a></td>
                                <td class="yt"><a target="_blank" href="<%= o.url %>" tabindex="-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 159 110">
                                        <path d="m154 17.5c-1.82-6.73-7.07-12-13.8-13.8-9.04-3.49-96.6-5.2-122 0.1-6.73 1.82-12 7.07-13.8 13.8-4.08 17.9-4.39 56.6 0.1 74.9 1.82 6.73 7.07 12 13.8 13.8 17.9 4.12 103 4.7 122 0 6.73-1.82 12-7.07 13.8-13.8 4.35-19.5 4.66-55.8-0.1-75z" fill="#f00"/>
                                        <path d="m105 55-40.8-23.4v46.8z" fill="#fff"/>
                                    </svg>                                    
                                </a></td>
                                <td class="spotify"><a target="_blank" href="<%= (o.spotifyUrl ? o.spotifyUrl : `/tracks/${o.id}`) %>">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
                                        <path fill="#1ed760" d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8Z"/>
                                        <path d="M406.6 231.1c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3zm-31 76.2c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm-26.9 65.6c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4z"/>
                                    </svg>
                                </a></td>
                            </tr>
                        </a>
                    <% } %>
                </tbody>
            </table>
        </div>
    </div>

</body>
</html>