Template System

class Template:
    """
    Base template class for creating custom application templates.
    
    Parameters:
    - title: Application title displayed in browser tab
    - header: Components to include in header area
    - sidebar: Components to include in sidebar area  
    - main: Components to include in main content area
    - **params: Additional template parameters
    """

class BootstrapTemplate:
    """
    Bootstrap-based template with responsive grid layout.
    
    Parameters:
    - title: Application title
    - sidebar_width: Width of sidebar in Bootstrap grid units
    - header_background: Background color for header
    - header_color: Text color for header
    - **params: Additional parameters
    """

class MaterialTemplate:
    """
    Material Design template with Material UI components.
    
    Parameters:
    - title: Application title
    - theme: Material theme ('default', 'dark')
    - color_primary: Primary theme color
    - color_secondary: Secondary theme color
    - **params: Additional parameters
    """

class FastListTemplate:
    """
    Fast loading list-style template for data-focused applications.
    
    Parameters:
    - title: Application title
    - sidebar: List of sidebar items
    - main: Main content components
    - header: Header components
    - **params: Additional parameters
    """

class FastGridTemplate:
    """
    Fast loading grid-style template with flexible layout areas.
    
    Parameters:  
    - title: Application title
    - sidebar: Sidebar content
    - main: Main grid content
    - header: Header content
    - **params: Additional parameters
    """

class GoldenTemplate:
    """
    Golden layout-based template with dockable panels and tabs.
    
    Parameters:
    - title: Application title
    - config: Golden Layout configuration
    - **params: Additional parameters
    """

class VanillaTemplate:
    """
    Minimal vanilla template with minimal built-in styling.
    
    Parameters:
    - title: Application title
    - **params: Additional parameters
    """

class ReactTemplate:
    """
    React-based template for integrating React components.
    
    Parameters:
    - title: Application title
    - **params: Additional parameters
    """

class SlidesTemplate:
    """
    Presentation slides template for slide-based applications.
    
    Parameters:
    - title: Presentation title
    - **params: Additional parameters
    """

class EditableTemplate:
    """
    Editable template with live layout customization capabilities.
    
    Parameters:
    - title: Application title
    - **params: Additional parameters
    """

import panel as pn

# Create template
template = pn.template.BootstrapTemplate(
    title="My Dashboard",
    sidebar_width=2,
    header_background='#2596be',
)

# Add content to template areas
template.sidebar.append(
    pn.Column(
        "## Navigation",
        pn.widgets.Select(name="Dataset", options=["A", "B", "C"]),
        pn.widgets.IntSlider(name="Year", start=2000, end=2023),
    )
)

template.main.append(
    pn.Column(
        "# Main Content",
        pn.pane.Markdown("Welcome to the dashboard!"),
        pn.pane.DataFrame(df)
    )
)

# Serve the template
template.servable()

# Create Material Design template
template = pn.template.MaterialTemplate(
    title="Data Analysis App",
    theme='dark',
    color_primary='#1976d2',
    color_secondary='#dc004e'
)

# Add components
template.sidebar.extend([
    pn.widgets.Select(name="Chart Type", options=["Line", "Bar", "Scatter"]),
    pn.widgets.MultiSelect(name="Columns", options=df.columns.tolist()),
])

template.main.extend([
    pn.pane.Markdown("## Analysis Results"),
    plot_pane,
    results_table
])

# Create fast grid template
template = pn.template.FastGridTemplate(
    title="Performance Dashboard",
    theme='dark'
)

# Define template areas
template.sidebar[:] = [control_panel]
template.main[:] = [
    pn.Row(metric_cards),
    pn.Row(charts),
    pn.Row(data_tables)
]
template.header[:] = [navigation_bar]

# Advanced template customization
template = pn.template.BootstrapTemplate(
    title="Advanced App",
    sidebar_width=3,
    header_background='linear-gradient(90deg, #667eea 0%, #764ba2 100%)',
    theme='dark'
)

# Configure template styling
template.config.sizing_mode = 'stretch_width'
template.config.background_color = '#f0f0f0'

# Add custom CSS
template.add_panel(pn.pane.HTML("""
<style>
.custom-header { font-family: 'Arial', sans-serif; }
</style>
"""), area='header')

import param

class MultiPageApp(param.Parameterized):
    page = param.Selector(default='Home', objects=['Home', 'Data', 'Analysis', 'Settings'])
    
    def __init__(self, **params):
        super().__init__(**params)
        self.template = pn.template.MaterialTemplate(title="Multi-Page App")
        self._setup_sidebar()
        self._setup_main()
    
    def _setup_sidebar(self):
        self.template.sidebar.append(
            pn.Param(self, parameters=['page'], widgets={'page': pn.widgets.RadioButtonGroup})
        )
    
    def _setup_main(self):
        self.template.main.append(
            pn.bind(self._render_page, self.param.page)
        )
    
    def _render_page(self, page):
        if page == 'Home':
            return pn.pane.Markdown("# Welcome to the Home Page")
        elif page == 'Data':
            return pn.pane.DataFrame(df)
        elif page == 'Analysis':
            return pn.Column(analysis_plots)
        else:
            return pn.pane.Markdown("# Settings Page")

app = MultiPageApp()
app.template.servable()

template.sidebar.append(widget)
template.main.extend([widget1, widget2])
template.header[:] = [header_components]