name: Image & Icon
slug: image
groups: general
form:
  general:
    - name : image_fields_group
      label: Image
      type: fields-group
      status: open
      schema:
        - name: image
          type: media
          value: 'libraries/quix/assets/images/placeholder.png'
        
        - name: alt_text
          label : Alt Text
          type: text
          help : Google focuses on alt text when trying to understand what an image is about. So it's valuable for SEO, in addition to being useful for users.
          depends:
            image: '*'

        - name: caption
          type: text 
          depends:
            image: '*'
    
    - name : image_links_fields_group
      label: Link
      type: fields-group
      schema:
        - name: link
          label: Link Url
          type: link
        
  styles:
    - name    : image_fields_group
      label   : Image
      type    : fields-group
      status  : open
      schema  :
        - name : alignment
          type : choose
          responsive : true
          options:
            left :
              label: Left
              icon : qxicon-align-left
            center :
              label : Center
              icon : qxicon-align-center
            right : 
              label : Right
              icon : qxicon-align-right

        - name : width
          label : Width
          type: slider
          max : 100
          units: %
          defaultUnit: %
        
        - name : opacity
          label : Opacity
          type: slider
          responsive : false
          max : 1
          step: 0.1
          units: %
          defaultUnit: %
    
    - name : border_fields_group
      label : Border
      type: fields-group
      schema :
        - name : img_border_width
          label : Width
          type : dimensions
        
        - name : img_border_type
          label : Border Type
          type: select
          value : none
          options: 
            none : None
            solid : Solid
            double : Double
            dotted : Dotted
            dashed : Dashed
        
        - name : img_border_color
          label : Border Color
          type : color 
        
        - name : img_border_radius
          label : Border Radius
          type: dimensions

      
    