<!-- require APlayer -->
{{ with .Params.Aplayer.style_cdn }}
    <link rel="stylesheet" href="{{ . | safeURL }}">
{{ else }}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
{{ end }}

{{ with .Params.Aplayer.cdn }}
    <script src="{{ . | safeURL }}"></script>
{{ else }}
    <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
{{ end }}

<div id="aplayer"></div>

<script>
    const ap = new APlayer({
        container: document.getElementById('aplayer'),

        {{ with .Get "fixed" }}
            fixed: {{- . -}},
        {{ end }}

        {{ with .Get "mini" }}
            mini: {{- . -}},
        {{ end }}

        {{ with .Get "autoplay" }}
            autoplay: {{- . -}},
        {{ end }}

        {{ with .Get "theme" }}
            theme: "{{ . }}",
        {{ end }}

        {{ with .Get "loop" }}
            loop: "{{ . }}",
        {{ end }}

        {{ with .Get "order" }}
            order: "{{ . }}",
        {{ end }}

        {{ with .Get "preload" }}
            preload: "{{ . }}",
        {{ end }}

        {{ with .Get "volume" }}
            volume: {{- . -}},
        {{ end }}

        {{ with .Get "mutex" }}
            mutex: {{- . -}},
        {{ end }}

        {{ with .Get "lrc-type" }}
            lrcType: {{- . -}},
        {{ end }}

        {{ with .Get "lrc-folded" }}
            listFolded: {{- . -}},
        {{ end }}

        {{ with .Get "list-max-height" }}
            listMaxHeight: {{- . -}},
        {{ end }}

        {{ with .Get "storage-name" }}
            storageName: "{{ . }}",
        {{ end }}

        audio: [
            {{- range $i, $v := split ($.Get "name")  "," -}}
                {{ if $i}},{{ end }}
                {
                    name: "{{ $v }}",

                    url: "{{ index (split ($.Get "url")  ",")  $i }}",

                    {{ with index (split ($.Get "artist")  ",") $i }}
                        artist: "{{ . }}",
                    {{ end }}

                    {{ with index (split ($.Get "cover")  ",") $i }}
                        cover: "{{ . }}",
                    {{ end }}

                    {{ with index (split ($.Get "lrc")  ",") $i }}
                        lrc: "{{ . }}",
                    {{ end }}

                    {{ with index (split ($.Get "theme")  ",") $i }}
                        theme: "{{ . }}"
                    {{ end }}
                }
            {{- end -}}
        ]

    });

    // You can call Aplayer APIs directly in your inner shortcodes.
    {{ .Inner | safeJS }}
</script>
