<!DOCTYPE html>
<html lang="en">
<head>

  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title>{{ title|default('Panel Applications', true)  }}</title>

  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600&Lato|Work+Sans:400,700&display=swap" rel="stylesheet" type='text/css'>

  <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <style>*:not(:defined){visibility:hidden}</style>

  <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="apple-touch-icon" sizes="180x180" href="{{ PANEL_CDN }}images/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="{{ PANEL_CDN }}images/favicon.ico">
  <link rel="manifest" href="{{ manifest|default('https://panel.holoviz.org/_static/icons/site.webmanifest', true) }}">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">
  {% if manifest %}
  <script type="text/javascript">
    if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('./serviceWorker.js');
  }
  </script>
  {% endif %}
  <script type="module" src="{{ PANEL_CDN }}bundled/@microsoft/fast-components@2.30.6/dist/fast-components.js"></script>
  <script type="module" src="{{ PANEL_CDN }}bundled/fast/js/fast_design.js"></script>
  <script type="text/javascript">
    function setParamsFromSearch(text) {
        const params = new URLSearchParams(location.search);
        if (text===""){
            params.delete("search")
        } else {
            params.set('search', text);
        }
        window.history.replaceState({}, '', `${location.pathname}?${params}`);
    }
    function hideCards(text) {
      text=text.toLowerCase();
      const cards = document.getElementsByTagName("li")
      for (const card of cards){
          if (text==="" || card.innerHTML.toLowerCase().includes(text)){
              card.style.display=""
          } else {card.style.display="none"}
      }

      setParamsFromSearch(text)
    }
    function toggleLightDarkTheme(update) {
        const switchEl = document.getElementById("theme-switch")
        const params = new URLSearchParams(location.search);
	if (switchEl.checked) {
	    window.bodyDesign.setLuminance(1)
	    window.bodyDesign.setBackgroundColor("#ffffff")
            params.set('theme', "default");
        } else {
	    window.bodyDesign.setLuminance(0.1)
	    window.bodyDesign.setBackgroundColor("#000000")
            params.set('theme', "dark");
        }
	if (update) {
            window.history.replaceState({}, '', `${location.pathname}?${params}`);
	}
    }
    function setSwitchFromParams(){
        const params = new URLSearchParams(window.location.search)
        if (params.has('theme')){
            const theme = params.get('theme')
            const switchEl = document.getElementById("theme-switch")
            if (theme==='dark'){
                switchEl.checked = false
            } else {
                switchEl.checked = true
            }
            toggleLightDarkTheme(true)
        } else {
            toggleLightDarkTheme(false)
	}
    }
    function setSearchFromParams(){
        const params = new URLSearchParams(window.location.search)
        if (params.has('search')){
            const search = params.get('search')
            const searchEl = document.getElementById("search-input")
            searchEl.value = search
            hideCards(search)
        }
    }
  </script>
  <style>
    :root {
      --background-color: #ffffff;
      --header-background: #000000;
    }
    html, #body-design-provider {
	min-height: 100vh;
    }
    body {
	margin: 0px;
	padding: 0;
	font-style: normal;
	font-variant-ligatures: normal;
	font-variant-caps: normal;
	font-variant-numeric: normal;
	font-variant-east-asian: normal;
	font-weight: normal;
	font-stretch: normal;
	font-size: 16px;
	line-height: normal;
	font-family: aktiv-grotesk, "Segoe UI", Arial, Helvetica, sans-serif;
	overflow-y: auto;
    }
    .gallery-item:hover {
	box-shadow: 0 1px 5px var(--neutral-fill-strong-focus);
    }
    .gallery-item {
	cursor: pointer;
    }
    .header {
	background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) ),url("{{ './' if manifest else PANEL_CDN }}images/index_background.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
    }
    .header-grid {
	/* Grid styles */
	padding: 4rem 2rem;
	display: grid;
	align-items: center;
	grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
    }
    .header article {
	margin-right: 1.0em;
	padding-left: 1.0em;
	padding-right: 1.0em;
	opacity: 0.8;
	color: white;
    }
    .article .h2 {
	font-size: 2em;
    }
    #body-design-provider {
	color: var(--neutral-foreground-rest);
    }
    #header-design-provider {
	background-color: #000000;
	color: var(--neutral-foreground-rest);
    }
    #title, #divider, #subtitle {
	background: transparent;
	font-size: 1.5em;
	color: white;
    }
    #search-input {
	margin-top: 1em;
	margin-left: 2em;
	margin-bottom: 0em;
	width: calc(100% - 4em);
    }
    .theme-toggle-icon {
	height: 25px;
	width: 25px;
	margin-top: 5px;
	fill: #ffffff;
    }
    /* The grid layout is inspired by
       https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-us	ing-css-grid/
       https://codepen.io/andybelldesign/pen/vMMYKJ */
    /*
      AUTO GRID
      Set the minimum item size with `--cards-grid-min-size` and you'll
      get a fully responsive grid with no media queries.
   */
    .cards-grid {
	--cards-grid-min-size: 16rem;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--cards-grid-min-size), 1fr));
	grid-gap: 2rem;
	list-style: none;
    }
    /* Presentational styles */
    .card {
	padding: 0px;
    }
    .cards-grid {
	margin: 2rem;
	padding: 0px;
    }
    .avatar {
	vertical-align: middle;
	float: right;
	width: 30px;
	height: 30px;
	margin-top: 5px;
	border-radius: 50%;
    }
    .card-action svg {
	vertical-align: middle;
	float: right;
	height: 20px;
	color: white;
	margin-top: 10px;
	margin-right: 10px;
	fill: var(--neutral-foreground-rest);
    }
    .card-image {
	height: 100px;
	width: 100%;
	margin-top: 25px;
    }
    .card-content {
	padding: 10px 10px 10px;
	color: var(--neutral-foreground-rest);
    }
    .card-text {
	height: 100px;
    }
    .card-header {
	height: 2em;
	text-align: center;
    }
    footer {
	padding: .50rem;
	text-align: center;
	font-size: .75rem;
    }
    #panel-logo {
	width: 300px;
    }
    .card-link {
	text-decoration: none;
	color: var(--neutral-foreground-rest);
    }
  </style>
</head>
<body>
      <fast-design-system-provider id="body-design-provider" use-defaults>
        <fast-design-system-provider id="header-design-provider">
        <section class="header">
        <fast-switch id="theme-switch" style="float: right; padding-top: 1em; padding-right: 2em;" onChange="toggleLightDarkTheme()" checked>
            <span slot="checked-message">
                <svg class="theme-toggle-icon" 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" 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>
        <fast-tooltip anchor="theme-switch">Click to toggle the Theme</fast-tooltip>
        <div class="header-grid">
        <h1>
            <fast-anchor id="title" href="https://panel.holoviz.org" appearance="neutral" target="_self"><img id="panel-logo" src="https://panel.holoviz.org/_static/logo_horizontal.png"/></fast-anchor>
            <fast-tooltip anchor="title">Click to visit the Panel web site</fast-tooltip>
        </h1>
        <article>
            <h2>{{ title|default('Panel Applications', true)  }}</h2>
        </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 item_label, item in items.items() %}
        <li class="card">
            <a class="card-link" href="{{ item }}" id="{{ item }}">
            <fast-card class="gallery-item">
                <svg class="card-image" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-window" viewBox="0 0 16 16">
                  <path d="M2.5 4a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm2-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm1 .5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"/>
                  <path d="M2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2zm13 2v2H1V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zM2 14a1 1 0 0 1-1-1V6h14v7a1 1 0 0 1-1 1H2z"/>
                </svg>
                <div class="card-content">
                    <h2 class="card-header">{{ item_label }}</h2>
                </div>
            </fast-card>
            <fast-tooltip anchor="{{ item }}">Click to start the application</fast-tooltip>
            </a>
        </li>
        {% endfor %}
        </ul>
        </section>
        <section>
        <fast-divider></fast-divider>
        <footer>
            <p>Made with &#x1f40d;, &#10084;&#65039;, <fast-anchor href="https://fast.design" appearance="hypertext" target="_blank">Fast</fast-anchor> and <fast-anchor href="https://panel.holoviz.org" appearance="hypertext" target="_blank">Panel</fast-anchor>.</p>
        </footer>
        </section>
    </fast-design-system-provider>
    <script type="text/javascript">
      document.addEventListener('DOMContentLoaded', (event) => {
	const header_design = new window.fastDesignProvider("#header-design-provider");
	header_design.setBackgroundColor('#ffffff')
	window.bodyDesign = new window.fastDesignProvider("#body-design-provider");
	setSwitchFromParams()
	setSearchFromParams()
      })
    </script>
</body>
</html>
