<?php // $file = /var/www/webroot/ROOT/wp-content/plugins/yt-seo-figure/elements/figure/element.json

return [
  '@import' => $filter->apply('path', './element.php', $file),
  'name' => 'figure',
  'title' => 'SEO Figure',
  'group' => 'custom',
  'icon' => $filter->apply('url', 'images/icon.svg', $file),
  'iconSmall' => $filter->apply('url', 'images/iconSmall.svg', $file),
  'element' => true,
  'width' => 500,
  'defaults' => [
    'margin' => 'default',
    'image_loading' => false,
    'caption_position' => 'below'
  ],
  'placeholder' => [
    'props' => [
      'image' => $filter->apply('url', '~yootheme/theme/assets/images/element-image-placeholder.png', $file),
      'caption' => 'Figure caption appears here'
    ]
  ],
  'templates' => [
    'render' => $filter->apply('path', './templates/template.php', $file)
  ],
  'fields' => [
    'image' => $config->get('builder.image'),
    'image_width' => [
      'label' => 'Width',
      'description' => 'Set the image width in pixels.',
      'type' => 'number',
      'attrs' => [
        'placeholder' => 'auto'
      ],
      'enable' => 'image'
    ],
    'image_height' => [
      'label' => 'Height',
      'description' => 'Set the image height in pixels.',
      'type' => 'number',
      'attrs' => [
        'placeholder' => 'auto'
      ],
      'enable' => 'image'
    ],
    'image_alt' => [
      'label' => 'Image Alt',
      'description' => 'Enter the image alt attribute for accessibility and SEO.',
      'source' => true,
      'enable' => 'image'
    ],
    'caption' => [
      'label' => 'Caption',
      'description' => 'Enter an optional caption for the figure. This will be wrapped in a <figcaption> element.',
      'type' => 'textarea',
      'attrs' => [
        'rows' => 3
      ]
    ],
    'caption_position' => [
      'label' => 'Caption Position',
      'description' => 'Choose where to display the caption relative to the image.',
      'type' => 'select',
      'options' => [
        'Above Image' => 'above',
        'Below Image' => 'below'
      ],
      'enable' => 'caption'
    ],
    'link' => $config->get('builder.link'),
    'link_aria_label' => $config->get('builder.link_aria_label'),
    'image_focal_point' => [
      'label' => 'Focal Point',
      'description' => 'Set a focal point to adjust the image focus when cropping.',
      'type' => 'select',
      'options' => [
        'Top Left' => 'top-left',
        'Top Center' => 'top-center',
        'Top Right' => 'top-right',
        'Center Left' => 'center-left',
        'Center Center' => '',
        'Center Right' => 'center-right',
        'Bottom Left' => 'bottom-left',
        'Bottom Center' => 'bottom-center',
        'Bottom Right' => 'bottom-right'
      ],
      'source' => true
    ],
    'image_loading' => [
      'label' => 'Loading',
      'description' => 'By default, images are loaded lazy. Enable eager loading for images in the initial viewport.',
      'type' => 'checkbox',
      'text' => 'Load image eagerly'
    ],
    'responsive_breakpoint' => [
      'label' => 'Responsive Breakpoint',
      'description' => 'Set the breakpoint width (in pixels) for switching between small and large image variants.',
      'type' => 'number',
      'attrs' => [
        'placeholder' => '800'
      ]
    ],
    'image_border' => [
      'label' => 'Border',
      'description' => 'Select the image border style.',
      'type' => 'select',
      'options' => [
        'None' => '',
        'Rounded' => 'rounded',
        'Circle' => 'circle',
        'Pill' => 'pill'
      ]
    ],
    'image_box_shadow' => [
      'label' => 'Box Shadow',
      'description' => 'Select the image box shadow size.',
      'type' => 'select',
      'options' => [
        'None' => '',
        'Small' => 'small',
        'Medium' => 'medium',
        'Large' => 'large',
        'X-Large' => 'xlarge'
      ]
    ],
    'link_target' => [
      'label' => 'Link Target',
      'type' => 'select',
      'options' => [
        'Same Window' => '',
        'New Window' => 'blank'
      ],
      'enable' => 'link'
    ],
    'position' => $config->get('builder.position'),
    'position_left' => $config->get('builder.position_left'),
    'position_right' => $config->get('builder.position_right'),
    'position_top' => $config->get('builder.position_top'),
    'position_bottom' => $config->get('builder.position_bottom'),
    'position_z_index' => $config->get('builder.position_z_index'),
    'margin' => $config->get('builder.margin'),
    'margin_remove_top' => $config->get('builder.margin_remove_top'),
    'margin_remove_bottom' => $config->get('builder.margin_remove_bottom'),
    'maxwidth' => $config->get('builder.maxwidth'),
    'maxwidth_breakpoint' => $config->get('builder.maxwidth_breakpoint'),
    'block_align' => $config->get('builder.block_align'),
    'block_align_breakpoint' => $config->get('builder.block_align_breakpoint'),
    'block_align_fallback' => $config->get('builder.block_align_fallback'),
    'text_align' => $config->get('builder.text_align'),
    'text_align_breakpoint' => $config->get('builder.text_align_breakpoint'),
    'text_align_fallback' => $config->get('builder.text_align_fallback'),
    'animation' => $config->get('builder.animation'),
    '_parallax_button' => $config->get('builder._parallax_button'),
    'visibility' => $config->get('builder.visibility'),
    'container_padding_remove' => $config->get('builder.container_padding_remove'),
    'name' => $config->get('builder.name'),
    'status' => $config->get('builder.status'),
    'id' => $config->get('builder.id'),
    'class' => $config->get('builder.cls'),
    'attributes' => $config->get('builder.attrs'),
    'css' => [
      'label' => 'CSS',
      'description' => 'Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-figure</code>, <code>.el-image</code>, <code>.el-caption</code>, <code>.el-link</code>',
      'type' => 'editor',
      'editor' => 'code',
      'mode' => 'css',
      'attrs' => [
        'debounce' => 500,
        'hints' => ['.el-figure','.el-image','.el-caption','.el-link']
      ]
    ]
  ],
  'fieldset' => [
    'default' => [
      'type' => 'tabs',
      'fields' => [[
          'title' => 'Content',
          'fields' => ['image',[
              'description' => 'Setting just one value preserves the original proportions. The image will be resized and cropped automatically.',
              'name' => '_image_dimension',
              'type' => 'grid',
              'width' => '1-2',
              'fields' => ['image_width','image_height']
            ],'image_alt','caption','caption_position','link','link_aria_label']
        ],[
          'title' => 'Settings',
          'fields' => [[
              'label' => 'Image',
              'type' => 'group',
              'divider' => true,
              'fields' => ['image_focal_point','image_loading','responsive_breakpoint','image_border','image_box_shadow']
            ],[
              'label' => 'Link',
              'type' => 'group',
              'divider' => true,
              'fields' => ['link_target']
            ],[
              'label' => 'General',
              'type' => 'group',
              'fields' => ['position','position_left','position_right','position_top','position_bottom','position_z_index','margin','margin_remove_top','margin_remove_bottom','maxwidth','maxwidth_breakpoint','block_align','block_align_breakpoint','block_align_fallback','text_align','text_align_breakpoint','text_align_fallback','animation','_parallax_button','visibility','container_padding_remove']
            ]]
        ],[
          'title' => 'Advanced',
          'fields' => ['name','status','id','class','attributes','css']
        ]]
    ]
  ]
];
