{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../user_guide/Templates.ipynb), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring four main content areas on the page, which can be populated as desired:\n",
    "\n",
    "* **`header`**: The header area of the HTML page\n",
    "* **`sidebar`**: A collapsible sidebar\n",
    "* **`main`**: The main area of the application\n",
    "* **`modal`**: A modal area which can be opened and closed from Python\n",
    "\n",
    "These four areas behave very similarly to other Panel layout components. In particular the header, sidebar and modal behave just like the list-like `Row`/`Column` layouts while the main area behaves like a `GridSpec`. This means we can easily append new components into these areas. Unlike other layout components however, the contents of the areas is fixed once rendered. If you need a dynamic layout you should therefore insert a regular Panel layout component (e.g. a `Column` or `Row`) and modify it in place once added to one of the content areas. \n",
    "\n",
    "Templates can allow for us to quickly and easily create web apps for displaying our data. Panel comes with a default Template, and includes multiple Templates that extend the default which add some customization for a better display.\n",
    "\n",
    "#### Parameters:\n",
    "\n",
    "In addition to the four different areas we can populate, the `FastGridTemplate` also provides the parameters below:\n",
    "\n",
    "* **`site`** (str): Name of the site. Will be shown in the header. Default is '', i.e. not shown.\n",
    "* **`site_url`** (str): Url of the site and logo. Default is \"/\".\n",
    "* **`logo`** (str): URI of logo to add to the header (if local file, logo is base64 encoded as URI).\n",
    "* **`title`** (str): A title to show in the header. Also added to the document head meta settings and as the browser tab title.\n",
    "* **`favicon`** (str): URI of favicon to add to the document head (if local file, favicon is base64 encoded as URI).\n",
    "* **`sidebar_footer`** (str): Can be used to insert additional HTML. For example a menu, some additional info, links etc.\n",
    "* **`config`** (TemplateConfig): Contains configuration options similar to `pn.config` but applied to the current Template only. (Currently only `css_files` is supported)\n",
    "* **`busy_indicator`** (BooleanIndicator): Visual indicator of application busy state.\n",
    "\n",
    "For configuring the **grid**\n",
    "\n",
    "* **`cols`** (dict): Number of columns in the grid for different display sizes (`default={'lg': 12, 'md': 10, 'sm': 6, 'xs': 4, 'xxs': 2}`)\n",
    "* **`breakpoints`** (dict): Sizes in pixels for various layouts (`default={'lg': 1200, 'md': 996, 'sm': 768, 'xs': 480, 'xxs': 0}`)\n",
    "* **`row_height`** (int, default=150): Height per row in the grid\n",
    "* **`dimensions`** (dict): Minimum/Maximum sizes of cells in grid units (`default={'minW': 0, 'maxW': 'Infinity', 'minH': 0, 'maxH': 'Infinity'}`)\n",
    "* **`prevent_collision`** (bool, default=False): Prevent collisions between grid items.\n",
    "* **`save_layout`** {bool, default=False): Save layout changes to localStorage.\n",
    "\n",
    "For **styling** you can use\n",
    "\n",
    "* **`theme`** (Theme): A Theme class (available in `panel.template`. One of `DefaultTheme` or `DarkTheme`). \n",
    "    - For convenience you can provide \"default\" or \"dark\" string to the constructor.\n",
    "    - If you add `?theme=default` or `?theme=dark` in the url this will set the theme unless explicitly declared\n",
    "* **`theme_toggle`** (boolean): If `True` a switch to toggle the Theme is shown. Default is `True`.\n",
    "* **`background_color`** (str): Optional body background color override.\n",
    "* **`neutral_color`** (str): Optional body neutral color override.\n",
    "* **`accent_base_color`** (str): Optional body accent base color override. The default is <span style=\"color:white;background:#0072B5\">#0072B5</span> (French Blue).\n",
    "* **`header_background`** (str): Optional header background color override.\n",
    "* **`header_color`** (str): Optional header text color override.\n",
    "* **`header_neutral_color`** (str): Optional header neutral color override.\n",
    "* **`header_accent_base_color`** (str): Optional header accent base color override.\n",
    "* **`corner_radius`** (str): The corner radius applied to controls.\n",
    "* **`font`** (str): A font url to import.\n",
    "* **`font_url`** (str): A font url to import.\n",
    "* **`shadow`** (str): Optional shadow override. Whether or not to apply shadow.\n",
    "* **`main_layout`** (str): What to wrap the main components into. Options are '' (i.e. none) and 'card' (Default). Could be extended to Accordion, Tab etc. in the future.\n",
    "\n",
    "The **`accent`** argument is a short cut to set both the `accent_base_color` and the `header_background`. Some accent colors that work well are <span style=\"color:white;background:#A01346\">#A01346</span> (Fast), <span style=\"color:white;background:#00A170\">#00A170</span> (Mint), <span style=\"color:white;background:#DAA520\">#DAA520</span> (Golden Rod), <span style=\"color:white;background:#2F4F4F\">#2F4F4F</span> (Dark Slate Grey), <span style=\"color:white;background:#F08080\">#F08080</span> (Light Coral) and <span style=\"color:white;background:#4099da\">#4099da</span> (Summer Sky).\n",
    "\n",
    "\n",
    "For **layout** you can use\n",
    "\n",
    "* **`sidebar_width`** (int): The width of the sidebar in pixels. Default is 330.\n",
    "* **`main_max_width`** (str): The maximum width of the main area. For example '800px' or '80%'. If the string is '' (default) no max width is set.\n",
    "\n",
    "For **meta** and **base** values you can use\n",
    "\n",
    "* **`meta_description`** (str): A meta description to add to the document head for search engine optimization. For example 'P.A. Nelson'.\n",
    "* **`meta_keywords`** (str): Meta keywords to add to the document head for search engine optimization.\n",
    "* **`meta_author`** (str): A meta author to add to the the document head for search engine optimization. For example 'P.A. Nelson'.\n",
    "* **`meta_refresh`** (str): A meta refresh rate to add to the document head. For example '30' will instruct the browser to refresh every 30 seconds. Default is '', i.e. no automatic refresh.\n",
    "* **`meta_viewport`** (str): A meta viewport to add to the header.\n",
    "* **`base_url`** (str): Specifies the base URL for all relative URLs in a page. Default is '', i.e. not the domain.\n",
    "* **`base_target`** (str): Specifies the base Target for all relative URLs in a page. Default is _self.\n",
    "\n",
    "\n",
    "________"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "In this case we are using the `FastGridTemplate`, built using the [Fast.design](https://www.fast.design/) framework. Here is an example of how you can set up a display using this template:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "import hvplot.pandas\n",
    "import numpy as np\n",
    "import panel as pn\n",
    "import pandas as pd\n",
    "\n",
    "xs = np.linspace(0, np.pi)\n",
    "\n",
    "freq = pn.widgets.FloatSlider(name=\"Frequency\", start=0, end=10, value=2)\n",
    "phase = pn.widgets.FloatSlider(name=\"Phase\", start=0, end=np.pi)\n",
    "\n",
    "def sine(freq, phase):\n",
    "    return pd.DataFrame(dict(y=np.sin(xs*freq+phase)), index=xs)\n",
    "\n",
    "def cosine(freq, phase):\n",
    "    return pd.DataFrame(dict(y=np.cos(xs*freq+phase)), index=xs)\n",
    "\n",
    "dfi_sine = hvplot.bind(sine, freq, phase).interactive()\n",
    "dfi_cosine = hvplot.bind(cosine, freq, phase).interactive()\n",
    "\n",
    "plot_opts = dict(\n",
    "    responsive=True, min_height=400,\n",
    "    # Align the curves' color with the template's color\n",
    "    color=pn.template.FastGridTemplate.accent_base_color\n",
    ")\n",
    "\n",
    "# Instantiate the template with widgets displayed in the sidebar\n",
    "template = pn.template.FastGridTemplate(\n",
    "    title=\"FastGridTemplate\",\n",
    "    sidebar=[freq, phase],\n",
    ")\n",
    "# Populate the main area with plots, to demonstrate the grid-like API\n",
    "template.main[:3, :6] = dfi_sine.hvplot(title='Sine', **plot_opts).output()\n",
    "template.main[:3, 6:] = dfi_cosine.hvplot(title='Cosine', **plot_opts).output()\n",
    "template.servable();"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Each built-in template comes with a *light* (default) and *dark* theme. The theme can be set when instantiating the template with the `theme` parameter, or [globally](../../how_to/styling/themes.md).\n",
    "\n",
    "<h3><b>FastGridTemplate with DefaultTheme</b></h3>\n",
    "<img src=\"../../assets/FastGridTemplate.png\" style=\"margin-left: auto; margin-right: auto; display: block;\"></img>\n",
    "</br>    \n",
    "<h3><b>FastGridTemplate with DarkTheme</b></h3>\n",
    "<img src=\"../../assets/FastGridTemplateDark.png\" style=\"margin-left: auto; margin-right: auto; display: block;\"></img>\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    ":::{tip}\n",
    "Built-in templates don't render necessarily well in a notebook as their styling can badly interact with the notebook built-in styling. You can disable rendering the output of a cell using `;`, as done above. For development purposes, the app can be quickly rendered in another tab by replacing `.servable()` with `.show()`. Alternatively, the [JupyterLab Preview](../../how_to/notebook/jupyterlabpreview.md) can be used to display objects marked with `.servable()` in a new JupyterLab tab, circumventing any potential styling issue.\n",
    ":::"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}
