"""# 🛸 Linked Widgets

Displays 3 linked `Aladin` widgets. Try zoming or panning.

Powered by \
[ipyaladin](https://github.com/cds-astro/ipyaladin) and \
[Panel](https://panel.holoviz.org/index.html).

Check out the [**App Gallery**](./)
"""

import panel as pn
from ipyaladin import Aladin
from ipywidgets import Box, Layout, widgets

pn.extension("ipywidgets", sizing_mode="stretch_width")

cosmetic_options = {"show_projection_control": False, "show_fullscreen_control": False}

a = Aladin(layout=Layout(width="100%"), target="M 81", fov=0.3, **cosmetic_options)
b = Aladin(layout=Layout(width="100%"), survey="P/DSS2/red", **cosmetic_options)
c = Aladin(layout=Layout(width="100%"), survey="P/2MASS/color", **cosmetic_options)

# synchronize target between 3 widgets
widgets.jslink((a, "_target"), (b, "_target"))
widgets.jslink((b, "_target"), (c, "_target"))

# synchronize FoV (zoom level) between 3 widgets
widgets.jslink((a, "_fov"), (b, "_fov"))
widgets.jslink((b, "_fov"), (c, "_fov"))

items = [a, b, c]

box_layout = Layout(
    display="flex",
    flex_flow="column",
    align_items="stretch",
    border="solid",
    width="100%",
)
box = Box(children=items, layout=box_layout)

pn.template.FastListTemplate(
    site="ipyaladin and Panel",
    site_url="./",
    title="Linked Widgets",
    sidebar=[
        pn.pane.PNG(
            "https://avatars.githubusercontent.com/u/26145382?s=200&v=4",
            link_url="https://cds.unistra.fr/",
        ),
        __doc__,
    ],
    main=[box],
    accent="#296bb5",
    main_layout=None,
).servable()