<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>{{ head_title | e if head_title else "Panel | Gallery" }}</title>
    {% if app_favicon %}<link rel="icon" href="{{ app_favicon }}" type="{{ favicon_type }}">{% endif %}
    {% if meta_name %}<meta name="name" content="{{ meta_name }}">{% endif %}
    {% if meta_description %}<meta name="description" content="{{ meta_description }}">{% endif %}
    {% if meta_keywords %}<meta name="keywords" content="{{ meta_keywords }}">{% endif %}
    {% if meta_author %}<meta name="author" content="{{ meta_author }}">{% endif %}
    {% if meta_refresh %}<meta http-equiv="refresh" content="{{ meta_refresh }}">{% endif %}
    {% if meta_viewport %}<meta name="viewport" content="{{ meta_viewport }}">{% endif %}
    {% if base_url and base_target %}<base href="{{ base_url }}" target="{{ base_target }}">{% endif %}
    <style>*:not(:defined){visibility:hidden}</style>
    <style>
        {{ gallery_css }}
        :root { --body-font: {{ font_family }}; }
        body { font-family: var(--body-font); }
        {% if background_image %}
        .header {
            /* Photo by mnm.all on Unsplash */
            background-image: url('{{ background_image }}');
        }
        {% endif %}
    </style>
    {% if font_url %}
    <link rel="stylesheet" type="text/css" href="{{ font_url }}" />
    {% endif %}
    <link href="https://use.typekit.net/spx2dgm.css" rel="stylesheet">
    <script type="module" src="https://unpkg.com/@microsoft/fast-colors@5.1.0"></script>
    <script type="module" src="https://unpkg.com/@microsoft/fast-components@1.13.0"></script>
    <script type="text/javascript">{{ gallery_js }}</script>
    <script type="module">
        import { parseColorHexRGB } from "https://unpkg.com/@microsoft/fast-colors@5.1.0";
        import { createColorPalette } from "https://unpkg.com/@microsoft/fast-components@1.13.0";

        function standardize_color(str){
            var ctx = document.createElement('canvas').getContext('2d');
            ctx.fillStyle = str;
            return ctx.fillStyle;
          }

        function setAccentColor(color, selector){
            color = standardize_color(color);
            const accent = color;
            const palette = createColorPalette(parseColorHexRGB(accent));
            const provider = document.querySelector(selector);
            provider.accentBaseColor = accent;
            provider.accentPalette = palette;
        }
        setAccentColor("{{ accent_base_color }}", "#body-design-provider");
        setAccentColor("#ffffff", "#header-design-provider");

        function setNeutralColor(color, selector){
            const palette = createColorPalette(parseColorHexRGB(color));
            const provider = document.querySelector(selector);

            provider.neutralPalette = palette;
        }
        setNeutralColor("#ffffff", "#header-design-provider");
        setNeutralColor("#000000", "#body-design-provider");
        </script>
</head>
<body>
    <fast-design-system-provider id="body-design-provider" use-defaults background-color="{% if theme=='dark' %}#000000{% else %}#ffffff{% endif %}" class="theme-{{ theme }}"
        >
        {% block inner_body %}
        {% block contents %}
            <fast-design-system-provider id="header-design-provider" use-defaults background-color="#000000">
            <section class="header">
            {% if theme_toggle %}
            <fast-switch id="theme-switch" style="float: right; padding-top: 1em; padding-right: 2em;" onChange="toggleLightDarkTheme()" {% if theme=='default' %}checked{% endif %}>
                <span slot="checked-message">
                    <svg class="theme-toggle-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"/></svg>
                  </span>
                  <span slot="unchecked-message">
                    <svg class="theme-toggle-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 2c-1.82 0-3.53.5-5 1.35C7.99 5.08 10 8.3 10 12s-2.01 6.92-5 8.65C6.47 21.5 8.18 22 10 22c5.52 0 10-4.48 10-10S15.52 2 10 2z"/></svg>
                  </span>
            </fast-switch>
            {% endif %}
            <fast-tooltip anchor="theme-switch">Click to toggle the Theme</fast-tooltip>
            <div class="header-grid">
            <h1>
                <fast-anchor id="title" href="{{ site_url }}" appearance="neutral" target="{{ target }}">{{ site_name }} </fast-anchor>
                <fast-anchor id="divider" appearance="neutral">/</fast-anchor>
                <fast-anchor id="subtitle" href="{{ url }}" appearance="neutral" target="{{ target }}">{{ name }}</fast-anchor>
            </h1>
            <article>
                <p>{{ description}}</p>
            </article>
            </div>
            </section>
            </fast-design-system-provider>
            <section class="search">
                <fast-text-field id="search-input" placeholder="search" onInput="hideCards(event.target.value)"></fast-text-field>
            </section>
            <section id="cards">
            <ul class="cards-grid">
            {% for app in applications %}
            <li class="card">
                <fast-card class="gallery-item">
                    <a title="Click to open" class="card-action" href="{{ app.url }}" target="{{ target }}">
                    <img class="card-image" src="{{ app.thumbnail }}"/>
                    <div class="card-content">
                        <h2 class="card-header">{{ app.name }}</h2>
                        <p class="card-text">{{ app.description }}</p>
                    </div></a>
                    <div class="card-actions">
                        {% if app.owner.url %}
                        <a class="card-action owner-action" href="{{ app.owner.url }}" target="{{ target }}">
                            <img src="{{ app.owner.avatar }}" alt="avatar" class="avatar" title="Owner: {{ app.owner.name}}">
                        </a>
                        {% endif %}
                        {% if app.author.url %}
                        <a class="card-action author-action" href="{{ app.author.url }}" target="{{ target }}">
                            <img src="{{ app.author.avatar }}" alt="avatar" class="avatar" title="Author: {{ app.author.name}}">
                        </a>
                        {% endif %}
                        {% if app.resources["binder"] %}
                        <a title="View on Binder" appearance="neutral" class="card-action binder-action" href="{{ app.resources['binder'] }}" target="{{ target }}">
                            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 44.4 44.4" style="enable-background:new 0 0 44.4 44.4;" xml:space="preserve">
                                <style type="text/css">
                                    .st0{fill:none;stroke:#F5A252;stroke-width:5;stroke-miterlimit:10;}
                                    .st1{fill:none;stroke:#579ACA;stroke-width:5;stroke-miterlimit:10;}
                                    .st2{fill:none;stroke:#E66581;stroke-width:5;stroke-miterlimit:10;}
                                </style>
                                <g>
                                    <path class="st0" d="M33.9,6.4c3.6,3.9,3.4,9.9-0.5,13.5s-9.9,3.4-13.5-0.5s-3.4-9.9,0.5-13.5l0,0C24.2,2.4,30.2,2.6,33.9,6.4z"/>
                                    <path class="st1" d="M35.1,27.3c2.6,4.6,1.1,10.4-3.5,13c-4.6,2.6-10.4,1.1-13-3.5s-1.1-10.4,3.5-13l0,0   C26.6,21.2,32.4,22.7,35.1,27.3z"/>
                                    <path class="st2" d="M25.9,17.8c2.6,4.6,1.1,10.4-3.5,13s-10.4,1.1-13-3.5s-1.1-10.4,3.5-13l0,0C17.5,11.7,23.3,13.2,25.9,17.8z"/>
                                    <path class="st1" d="M19.2,26.4c3.1-4.3,9.1-5.2,13.3-2.1c1.1,0.8,2,1.8,2.7,3"/>
                                    <path class="st0" d="M19.9,19.4c-3.6-3.9-3.4-9.9,0.5-13.5s9.9-3.4,13.5,0.5"/>
                                </g>
                            </svg>
                        </a>
                        {% endif %}
                        {% if app.resources["github"] %}
                        <a title="View on Github" appearance="neutral" class="card-action github-action" href="{{ app.resources['github'] }}" target="{{ target }}">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="currentColor"/>
                            </svg>
                        </a>
                        {% endif %}
                        {% if app.resources["code"] %}
                        <a title="View the Code" appearance="neutral" class="card-action code-action" href="{{ app.resources['code'] }}" target="{{ target }}">
                            <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0zm-.999-3.124a.5.5 0 0 1 .33.625l-4 13a.5.5 0 0 1-.955-.294l4-13a.5.5 0 0 1 .625-.33z"/>
                            </svg>
                        </a>
                        {% endif %}
                        {% if app.resources["download"] %}
                        <a title="Download" appearance="neutral" class="card-action download-action" href="{{ app.resources['download'] }}" download="">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                <path d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"/>
                            </svg>
                        </a>
                        {% endif %}
                        {% if app.resources["gif"] %}
                        <a title="View the .gif video" appearance="hypertext" class="card-action gif-action" href="{{ app.resources['gif'] }}" target="{{ target }}">
                            <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M12.002 4h-10a1 1 0 0 0-1 1v8l2.646-2.354a.5.5 0 0 1 .63-.062l2.66 1.773 3.71-3.71a.5.5 0 0 1 .577-.094l1.777 1.947V5a1 1 0 0 0-1-1zm-10-1a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-10zm4 4.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
                                <path fill-rule="evenodd" d="M4 2h10a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1v1a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2h1a1 1 0 0 1 1-1z"/>
                                </svg>
                        </a>
                        {% endif %}
                        {% if app.resources["youtube"] %}
                        <a title="View on Youtube" appearance="hypertext" class="card-action youtube-action" href="{{ app.resources['youtube'] }}" target="{{ target }}">
                            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="img" viewBox="0 0 576 512">
                                <path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/>
                            </svg>
                        </a>
                        {% endif %}
                        {% if app.resources["mp4"] %}
                        <a title="View the .mp4 video" appearance="hypertext" class="card-action mp4-action" href="{{ app.resources['mp4'] }}" target="{{ target }}">
                            <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0h8v6H4V1zm8 8H4v6h8V9zM1 1h2v2H1V1zm2 3H1v2h2V4zM1 7h2v2H1V7zm2 3H1v2h2v-2zm-2 3h2v2H1v-2zM15 1h-2v2h2V1zm-2 3h2v2h-2V4zm2 3h-2v2h2V7zm-2 3h2v2h-2v-2zm2 3h-2v2h2v-2z"/>
                            </svg>
                        </a>
                        {% endif %}
                        {% if app.resources["documentation"] %}
                        <a title="View the documentation" appearance="neutral" class="card-action documentation-action" href="{{ app.resources['documentation'] }}" target="{{ target }}">
                            <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M1 2.828v9.923c.918-.35 2.107-.692 3.287-.81 1.094-.111 2.278-.039 3.213.492V2.687c-.654-.689-1.782-.886-3.112-.752-1.234.124-2.503.523-3.388.893zm7.5-.141v9.746c.935-.53 2.12-.603 3.213-.493 1.18.12 2.37.461 3.287.811V2.828c-.885-.37-2.154-.769-3.388-.893-1.33-.134-2.458.063-3.112.752zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
                            </svg>
                        </a>
                        {% endif %}
                    </div>
                </fast-card>
            </li>
            {% endfor %}
            </ul>
            </section>
            {% if footer %}
            <section>
            <fast-divider></fast-divider>
            <footer><p>
                {{ footer }}
            </p></footer>
            </section>
            {% endif %}
        {% endblock %}
        {{ plot_script | indent(8) }}
        {% endblock %}
    <script type="text/javascript">
        setSwitchFromParams()
        setSearchFromParams()
    </script>
    </fast-design-system-provider>
</body>
</html>