tm_im:
  namespace: "Organisms/TM - Interactive Map"
  use: "@organisms/tm-im/tm-im.html.twig"
  label: IM Component
  description: IM Component
  libraries:
    - tm_im_lib:
        css:
          component:
            ../styles/tm-im.css: { }

  fields:
    content:
      type: pattern
      label: Content
      preview:
        - id: tm_im_sidebar
        - id: tm_im_map


  settings:

    position:
      label: Type
      type: select
      options:
        left: Left
        right: Right
      preview: left
      default_value: left

    hide_toggle:
      label: Hide toggle
      type: boolean
      preview: false
      default_value: false


tm_im_sidebar:
  namespace: "Organisms/TM - Interactive Map"
  use: "@organisms/tm-im/partials/tm-im-sidebar.html.twig"
  label: Sidebar
  description: Sidebar

  fields:
    content:
      type: pattern
      label: Content
      preview:
        - id: tm_im_tabs

tm_im_map:
  namespace: "Organisms/TM - Interactive Map"
  use: "@organisms/tm-im/partials/tm-im-map.html.twig"
  label: Map
  description: Map

  fields:
    content:
      type: pattern
      label: Map
      preview:
        - id: image
          fields:
            url: "../images/map-mock.png"
            caption: ""
          settings:
            background_class: "h-100 w-100"
            type: "bg"
            bg_size: "bg-contain"


tm_im_tabs:
  namespace: "Organisms/TM - Interactive Map"
  use: "@organisms/tm-im/partials/tm-im-tabs.html.twig"
  label: Tabs
  description: Tabs

  settings:
    tab_pid:
      type: textfield
      label: Tab PID
      preview: tab-id

  fields:
    title:
      type: text
      label: Title
      preview: "<i class='far fa-map'></i> Live Network Map"
    subtitle:
      type: text
      label: Subtitle
      preview: "Realtime Information"
    logo_url:
      type: text
      label: Logo URL
      preview: "/images/header-logos.emr.svg"
    tab_items:
      type: object
      label: Items
      preview:
        - tbid: tab-id-a
          title: Instructions
          content: '<h2>How to use</h2><ul><li>Zoom in/out of the map with mousewheel, the sidebar top left or pinch on a touch device</li><li>Pan around by clicking/touching and dragging the map</li></ul>'
          first: true
        - tbid: tab-id-b
          title: Check service
          content: '<h2>Service check</h2><p>Enter your origin and destination stations below to check for any disruption on your route</p>'
