main_block = {
    'css': '''
    footer {visibility: hidden}
    
    /* Modify the forecast button size */
    .cta_btn {width: 260px !important; margin: auto !important}
    '''
}

data_example_btn = {
    'value': 'Load Demo Dataset A',
    'variant': 'secondary'
}

data_example_b_btn = {
    'value': 'Load Demo Dataset B',
    'variant': 'secondary'
}

demand_fcst_btn = {
    'value': 'Demand Forecasting ➔',
    'variant': 'primary',

    # Refer to css in main_block
    'elem_classes': 'cta_btn'
}

# The button toggls the inventory optimization tab
inventory_toggle_btn = {
    'value': 'Inventory Optimization ➔',
    'variant': 'primary',

    # Refer to css in main_block
    'elem_classes': 'cta_btn'
}

inventory_cta_button = {
    'value': 'Plan Inventory',
    'variant': 'primary',

    # Refer to css in main_block
    'elem_classes': 'cta_btn'
}

inventory_demo_button = {
    'value': 'Load Demo Inventory Data',

    # Refer to css in main_block
    'elem_classes': 'cta_btn'
}

fcst_button = {
    'value': 'Forecast',
    'variant': 'primary',
}

data_requirements = {
    'value':
        """ 
        ## Please upload data in csv format follow structure below:
        - The data should contains **"datetime", "sku" and "target"** columns.
        - The **"datetime"** columns should be formatted as proper datetime format. 
        - Then **"sku"** column is the unique product identifier, if "sku" column is not provided, the uploaded data will be considered as timeseries for single product.
        - The **"target"** column is the value for forecasting. It should be numeric. 
        - Use the button below to load demo data set or use the data uploader to upload your own dataset. 
        """
}

inventory_recommendations_md = {
    'visible': False
}

inventory_viz = {
    'visible': False,
}

data_uploader = {
    'file_types': ['.csv'],
}


data_viz_col = {
    'visible': False
}

sku_plot_selector = {
    'label': 'Select SKU',
    'interactive': True,
    'multiselect': True}

data_viz_plot = {
    'visible': False,
    # 'interactive': True,
    'container': True,
    'min_width': 700
}


skus_to_fcst_dropdown = {
    'label': 'Select SKU to forecast',
    'interactive': True,
}

skus_fcsted_dropdown = {
    'label': 'Select SKU to view forecasting results',
    'interactive': True,
}

fcst_data_prev_df = {
    'height': 250,
    'label': 'Data Preview'
}

skus_fcsted_df = {
    'height': 200,
    'label': 'Forecasting Result'}

data_table = {
    'height': 200, 'visible': False,
}

inventory_dataframe = {
    'height': 300,
    'interactive': False,
    # 'info': 'Please fill up the price, cost, and required space per unit for inventory optimization.',
    'col_count': 5
}

inventory_recommendations_df = {
    'height': 300,
    'label': 'Inventory Optimization Recommendations',
    'visible': False
}

freq_options_radio = {
    'choices': [('Hourly', 'H'),
                ('Daily', 'D'),
                ('Weekly', 'W'),
                ('Monthly - Start', 'MS'),
                ('Monthly - End', 'M')],
    'value': 'D',
    'label': 'Data frequency',
    'info': 'Please select the correct data frequency, e.g. daily or weekly data. This can be identified by looking at the table on the right. Monthly-Start / Monthly-End depends on which date had been choose to represent the month after data aggregation. ',
    'interactive': True
}

freq_convention_opt_radio = {
    'choices': [('Start', 'S'),
                ('End', ''),
                ],
    'value': 'S',
    'label': 'Frequency convention (start / end)',
    'info': 'Forecasted will based on this option, e.g. if select end and frequency is monthly, model will forecast the value for every month end.',
    'interactive': True,
    'visible': False
}

inventory_markdown = {
    'value': """
    # Inventory optimization
    - Step 1: Please complete demand forecasting for at least 2 products. 
    - Step 2: Fill up the **'price'**, **'cost'** and **'required_space_per_uint'** to continue inventory optimization.
    - Step 3: Set the **inventory storage capacity** with the total available storage unit you have. And set the **Budget Limit**.
    - Please make sure ALL cells in the below table are filled up before click "Plan Inventory"
    """
}

inventory_storage_capacity = {
    'label': 'Inventory Storage Capacity',
    'info': 'The total storage capacity for all the products'
}

inventory_budget_constraint = {
    'label': 'Budget Limit',
    'info': ''
}