{% stories ViewsViewTable with {
  "title": "Organisms/View Table",
  "parameters": {
    "componentSubtitle": "Displays a Drupal View as a Bootstrap-compatible HTML table.",
    "docs": {
      "description": {
        "component": "A component to render tabular view data with support for Bootstrap theming, responsiveness, and utility classes."
      },
      "story": {
        "inline": true
      }
    }
  },
  "argTypes": {
    "variant": {
      "name": "Variant",
      "description": "Bootstrap table variant class for contextual styling.",
      "control": "select",
      "defaultValue": "",
      "options": ["", "primary", "secondary", "success", "info", "warning", "danger", "light", "dark"]
    },
    "responsive": {
      "name": "Responsive",
      "description": "Enable responsive horizontal scrolling on smaller viewports.",
      "control": "boolean",
      "defaultValue": true
    },
    "striped_rows": {
      "name": "Striped Rows",
      "description": "Adds zebra-striping to table rows.",
      "control": "boolean",
      "defaultValue": false
    },
    "striped_columns": {
      "name": "Striped Columns",
      "description": "Adds zebra-striping to table columns.",
      "control": "boolean",
      "defaultValue": false
    },
    "hover": {
      "name": "Hover",
      "description": "Enable hover state on table rows.",
      "control": "boolean",
      "defaultValue": false
    },
    "bordered": {
      "name": "Bordered",
      "description": "Add borders on all sides of the table.",
      "control": "boolean",
      "defaultValue": false
    },
    "border_color": {
      "name": "Border Color",
      "description": "Bootstrap border color utility class.",
      "control": "select",
      "defaultValue": "",
      "options": ["", "primary", "secondary", "success", "info", "warning", "danger", "light", "dark", "black", "white", "primary-subtle", "secondary-subtle", "success-subtle", "info-subtle", "warning-subtle", "danger-subtle", "light-subtle", "dark-subtle"]
    },
    "size": {
      "name": "Table Size",
      "description": "Controls the padding of table cells. Use `sm` for compact tables.",
      "control": "select",
      "defaultValue": "",
      "options": ["", "sm"]
    },
    "caption": {
      "name": "Caption",
      "description": "An optional caption for the table.",
      "control": "text",
      "defaultValue": ""
    },
    "table_utility_classes": {
      "name": "Table Utility Classes",
      "description": "Extra Bootstrap utility classes for the table.",
      "control": "object",
      "defaultValue": []
    },
    "thead_utility_classes": {
      "name": "Header Utility Classes",
      "description": "Utility classes for the `<thead>` element.",
      "control": "object",
      "defaultValue": []
    },
    "tbody_utility_classes": {
      "name": "Body Utility Classes",
      "description": "Utility classes for the `<tbody>` element.",
      "control": "object",
      "defaultValue": []
    },
    "tfoot_utility_classes": {
      "name": "Footer Utility Classes",
      "description": "Utility classes for the `<tfoot>` element.",
      "control": "object",
      "defaultValue": []
    },
    "attributes": {
      "name": "Table Attributes",
      "description": "HTML attributes for the table tag.",
      "control": "object",
      "defaultValue": {}
    },
    "thead_attributes": {
      "name": "Thead Attributes",
      "description": "HTML attributes for the thead tag.",
      "control": "object",
      "defaultValue": {}
    },
    "tbody_attributes": {
      "name": "Tbody Attributes",
      "description": "HTML attributes for the tbody tag.",
      "control": "object",
      "defaultValue": {}
    },
    "tfoot_attributes": {
      "name": "Tfoot Attributes",
      "description": "HTML attributes for the tfoot tag.",
      "control": "object",
      "defaultValue": {}
    },
    "rows": {
      "name": "Rows",
      "description": "An array of row objects to be rendered in the table.",
      "control": "object",
      "defaultValue": [
        {
          "cells": ["Name", "Role", "Status"],
          "is_header": true
        },
        {
          "cells": ["Alice", "Developer", "Active"]
        },
        {
          "cells": ["Bob", "Designer", "Inactive"]
        },
        {
          "cells": ["Carol", "Manager", "Active"]
        }
      ]
    }
  }
} %}

{% story ViewsViewTableDefault with {
  "name": "Default Table",
  "args": {
    "responsive": true,
    "rows": [
      {
        "cells": ["Title", "Author", "Date"],
        "is_header": true
      },
      {
        "cells": ["Post A", "Admin", "2024-01-01"]
      },
      {
        "cells": ["Post B", "Editor", "2024-02-01"]
      },
      {
        "cells": ["Post C", "User", "2024-03-01"]
      }
    ]
  }
} %}
  {{ include("vartheme_bs5:views-view-table") }}
{% endstory %}

{% story ViewsViewTableStriped with {
  "name": "Striped and Hoverable",
  "args": {
    "striped_rows": true,
    "hover": true,
    "rows": [
      {
        "cells": ["Product", "Price", "Stock"],
        "is_header": true
      },
      {
        "cells": ["Keyboard", "$49", "In stock"]
      },
      {
        "cells": ["Mouse", "$25", "In stock"]
      },
      {
        "cells": ["Monitor", "$149", "Out of stock"]
      }
    ]
  }
} %}
  {{ include("vartheme_bs5:views-view-table") }}
{% endstory %}

{% story ViewsViewTableStyled with {
  "name": "Styled Table with Variants",
  "args": {
    "variant": "info",
    "size": "sm",
    "bordered": true,
    "border_color": "primary-subtle",
    "caption": "List of active users",
    "rows": [
      {
        "cells": ["Username", "Role", "Last Login"],
        "is_header": true
      },
      {
        "cells": ["jdoe", "Admin", "Today"]
      },
      {
        "cells": ["asmith", "Editor", "Yesterday"]
      }
    ],
    "table_utility_classes": ["table-sm", "text-center"]
  }
} %}
  {{ include("vartheme_bs5:views-view-table") }}
{% endstory %}

{% endstories %}
