<!DOCTYPE html>
<html lang="en">
<head>
    <%- include("partials/head")  %>
    <title><%= motif.name %> - Doctor Who Leitmotif Catalogue</title>
    <link rel="stylesheet" href="/public/css/motif.css" />
</head>
<body>
    <div class="container">
        <div class="header">
            <span class="nav"><a href="/motifs"> < All motifs</a></span>
            <span class="title">
                <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M43 54.5C43 58.366 38.9706 61.5 34 61.5C29.0294 61.5 25 58.366 25 54.5C25 50.634 29.0294 47.5 34 47.5C38.9706 47.5 43 50.634 43 54.5Z" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M43 54.5L43 18.5" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M43 18.5L49.4065 27.9881C52.973 33.2702 52.4044 40.3183 48.0373 44.9603L48 45" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                <%= motif.name %>
            </span>
            <div class="tags">
                <% for (const tag of motif.tags) { %>
                    <span class="tag"><%= tag.name %></span>
                <% } %>
            </div>
        </div>
        <div class="panel">
            <div class="left subpanel">
                <div class="details pane">
                    <span class="paneTitle">Details</span>
                    <div class="content">
                        <b>Represents:</b> <%= motif.represents %>
                        <br /><br />
                        <b>Notes:</b><br />
                        <%= motif.notes %>
                    </div>
                </div>
                <div class="appearances pane">
                    <span class="paneTitle">Notable Appearances</span>
                    <div class="list">
                        <% for (const o of motif.appearances) { %>
                            <a class="item" href="/tracks/<%= o.id %>">
                                <span class="appname"><%= o.name %></span>
                                <span class="episode"><%= o.appears %></span>
                                <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M14.2014 8.50824L8.72036 8.50907M8.71248 8.50907L2.76248 8.50907" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M8.71246 2.55L13.8736 7.71114C14.3093 8.1468 14.3093 8.8532 13.8736 9.28886L8.71246 14.45" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </a>
                        <% } %>
                    </div>
                </div>
            </div>
            <div class="right subpanel">
                <div class="listen pane">
                    <span class="paneTitle">Listen</span>
                    <div class="embed">
                        <% const youtubeID = motif.mainAppearance[0].url.split("https://youtu.be/")[1]; %>
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/<%= youtubeID %>" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                    </div>
                    <span class="caption">Track: '<%= motif.mainAppearance[0].name %>'</span>
                    <% if (motif.mainAppearance[0].spotifyUrl) { %>
                        <span class="spotify"><a target="_blank" href="<%= motif.mainAppearance[0].spotifyUrl %>"><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>Listen on Spotify</a></span>
                    <% } %>
                </div>
            </div>
        </div>
    </div>
</body>
</html>