{% from macros import embed %}

<!DOCTYPE html>
<html lang="en">
{% block head %}
<head>
    {% block inner_head %}
    <meta charset="utf-8">
    <title>{% block title %}{{ title_name | e if title_name else "Panel App" }}{% endblock %}</title>
    {% block preamble %}{% endblock %}
    {% block resources %}
        {% block css_resources %}
        {{ bokeh_css | indent(8) if bokeh_css }}
        {% endblock %}
        {% block js_resources %}
        {{ bokeh_js | indent(8) if bokeh_js }}
        {% endblock %}
    {% endblock %}
    {% block postamble %}
        <style>*:not(:defined){visibility:hidden}</style>
        <link href="https://use.typekit.net/spx2dgm.css" rel="stylesheet">
        <script type="module" src="https://unpkg.com/@microsoft/fast-components"></script>
        <script type="text/javascript">{{ gallery_js }}</script>
    {% endblock %}
    {% endblock %}
</head>
{% endblock %}
{% block body %}
<body>
    <fast-design-system-provider use-defaults>
        {% block inner_body %}
        {% block contents %}
            <section class="header">
            <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>
            </section>
            <section class="search">
                <fast-text-field id="search-input" placeholder="search" onInput="hideCards(event.target.value)"></fast-text-field>
            </section>
            <section class="cards">
            <ul class="cards-grid">
            {% for app in items %}
            <li class="card">
                <fast-card>
                    <img class="card-image" src="{{ app.thumbnail_url }}"/>
                    <div class="card-content">
                        <h2 class="card-header">{{ app.name }}</h2>
                        <p class="card-text">{{ app.description }}</p>
                        <div class="card-actions">
                            <fast-anchor class="card-action open-action" href="{{ app.url }}" target="{{ target }}">Open</fast-anchor>
                            {% if app.author.url %}
                            <a class="card-action author-action" href="{{ app.author.url }}" target="{{ target }}">
                                <img src="{{ app.author.avatar_url }}" alt="Avatar" class="avatar" title="Author: {{ app.author.name}}">
                            </a>
                            {% endif %}
                            {% if app.video_url %}
                            <a title="Video" appearance="neutral" class="card-action video-action" href="{{ app.video_url }}" target="{{ target }}">
                                <svg viewBox="0 0 16 16" class="bi bi-film" fill="currentColor" 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.documentation_url %}
                            <a title="Documentation" appearance="neutral" class="card-action book-action" href="{{ app.documentation_url }}" target="{{ target }}">
                                <svg viewBox="0 0 16 16" class="bi bi-book" fill="currentColor" 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 %}
                            {% if app.code_url %}
                            <a title="Code" appearance="neutral" class="card-action code-action" href="{{ app.code_url }}" target="{{ target }}">
                                <svg viewBox="0 0 16 16" class="bi bi-code-slash" fill="currentColor" 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 %}
                        </div>
                    </div>
                </fast-card>
            </li>
            {% endfor %}
            </ul>
            </section>
            <section>
            <fast-divider></fast-divider>
            <footer>
                <p>Made with &#x1f40d;, &#x2764; and <fast-anchor href="https://panel.holoviz.org" appearance="hypertext" target="_blank">Panel</fast-anchor>.</p>
            </footer>
            </section>
        {% endblock %}
        {{ plot_script | indent(8) }}
        {% endblock %}
    </fast-design-system-provider>
</body>
{% endblock %}
</html>