import dash
from dash import Dash, html, dcc
from .pages import home, config, stage, schema, table

external_scripts = [
    {'src': 'https://cdn.tailwindcss.com'}
]
# external_script = ["https://tailwindcss.com/", {"src": "https://cdn.tailwindcss.com"}]

app = Dash(__name__, use_pages=True, external_scripts=external_scripts)
app.scripts.config.serve_locally = True
dash.register_page(
    home.__name__, 
    path='/', 
    layout=home.layout,
)
dash.register_page(
    config.__name__, 
    path='/config', 
    layout=config.layout
)
dash.register_page(
    stage.__name__, 
    path_template='/stage/<stage_name>', 
    layout=stage.layout
)
dash.register_page(
    schema.__name__, 
    path_template='/stg/<stage_name>/schema/<schema_name>',
    layout=schema.layout
)
dash.register_page(
    table.__name__,
    path_template='/stg/<stage_name>/schm/<schema_name>/table/<table_name>',
    layout=table.layout
)

app.layout = html.Div([
    html.Div([
        dcc.Link(
            html.H1('Plesna', ),
            href="/",
            className="text-4xl p-4 text-center grow align-baseline"
        ),
        dcc.Link("Config",
                 href="/config",
                 className="flex-none hover:bg-amber-100 p-4 align-middle"
                 )
    ],
        className="bg-amber-300 flex flex-row shadow"
    ),
    dash.page_container
])

if __name__ == '__main__':
    app.run(debug=True)