#!/usr/bin/env python
# coding: utf-8

# In[ ]:


import panel as pn
import numpy as np
import holoviews as hv

pn.extension(sizing_mode = 'stretch_width')


# 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:
# 
# * **`header`**: The header area of the HTML page
# * **`sidebar`**: A collapsible sidebar
# * **`main`**: The main area of the application
# * **`modal`**: A modal area which can be opened and closed from Python
# 
# These four areas behave very similarly to other Panel layout components and have list-like semantics. 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. 
# 
# 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.
# 
# #### Parameters:
# 
# In addition to the four different areas we can populate the default templates also provide a few additional parameters:
# 
# * **`busy_indicator`** (BooleanIndicator): Visual indicator of application busy state.
# * **`header_background`** (str): Optional header background color override.
# * **`header_color`** (str): Optional header text color override.
# * **`logo`** (str): URI of logo to add to the header (if local file, logo is base64 encoded as URI).
# * **`site`** (str): Name of the site. Will be shown in the header. Default is '', i.e. not shown.
# * **`site_url`** (str): Url of the site and logo. Default is "/".
# * **`title`** (str): A title to show in the header.
# * **`theme`** (Theme): A Theme class (available in `panel.template.theme`)
# * **`sidebar_width`** (int): The width of the sidebar in pixels. Default is 370.
# 
# ________

# In this case we are using the `MaterialTemplate`, built on [Material Components for the web](https://material.io/develop/web/), which is a CSS framework that provides a lot of built in stylings to create a smooth layout. Here is an example of how you can set up a display using this template:

# In[ ]:


material = pn.template.MaterialTemplate(title='Material Template')

xs = np.linspace(0, np.pi)
freq = pn.widgets.FloatSlider(name="Frequency", start=0, end=10, value=2)
phase = pn.widgets.FloatSlider(name="Phase", start=0, end=np.pi)

@pn.depends(freq=freq, phase=phase)
def sine(freq, phase):
    return hv.Curve((xs, np.sin(xs*freq+phase))).opts(
        responsive=True, min_height=400)

@pn.depends(freq=freq, phase=phase)
def cosine(freq, phase):
    return hv.Curve((xs, np.cos(xs*freq+phase))).opts(
        responsive=True, min_height=400)

material.sidebar.append(freq)
material.sidebar.append(phase)

material.main.append(
    pn.Row(
        pn.Card(hv.DynamicMap(sine), title='Sine'),
        pn.Card(hv.DynamicMap(cosine), title='Cosine')
    )
)
material.servable();


# <h3><b>MaterialTemplate with DefaultTheme</b></h3>
# <img src="../../assets/Material.png" style="margin-left: auto; margin-right: auto; display: block;"></img>
# </br>    
# <h3><b>MaterialTemplate with DarkTheme</b></h3>
# <img src="../../assets/MaterialDark.png" style="margin-left: auto; margin-right: auto; display: block;"></img>

# The app can be displayed within the notebook by using `.servable()`, or rendered in another tab by replacing it with `.show()`. 
# 
# Themes can be added using the optional keyword argument `theme`. Each template comes with a DarkTheme and a DefaultTheme, which can be set `MaterialTemplate(theme=DarkTheme)`. If no theme is set, then DefaultTheme will be applied.
# 
# It should be noted that Templates may not render correctly in a notebook, and for the best performance they should ideally be deployed to a server.