{
  "client_requirement": "client_is_viewer+",
  "items": [
    {
      "type": "header_page_title",
      "items": [
        {
          "type": "h1",
          "text": "Client Credentials"
        },
        {
          "type": "p",
          "text": "Username and password credentials for 802.1X supplicants and captive portal authentication."
        }
      ]
    },
    {
      "type": "raw_html",
      "html": "%PRO_NOTE%"
    },
    {
      "type": "table",
      "datasource": "sqlite:client_credentials",
      "empty_message": "No credentials configured.",
      "columns": [
        {
          "label": "Username",
          "field": "username",
          "class": "col-mono"
        },
        {
          "label": "Description",
          "field": "description"
        },
        {
          "label": "Type",
          "field": "user_type_label",
          "class": "col-narrow"
        },
        {
          "label": "VLAN",
          "field": "vlan",
          "class": "col-narrow col-mono"
        },
        {
          "label": "Enabled",
          "field": "enabled",
          "class": "col-narrow",
          "render": "badge_toggle",
          "toggle_action": "/action/clientcredentials/toggle",
          "client_requirement": "client_is_administrator+"
        },
        {
          "label": "Session",
          "field": "expires_label",
          "class": "col-narrow"
        }
      ],
      "row_actions": [
        {
          "client_requirement": "client_is_administrator+",
          "method": "js_edit",
          "target": "add-form",
          "text": "Edit",
          "class": "btn-ghost btn-sm"
        },
        {
          "client_requirement": "client_is_administrator+",
          "action": "/action/clientcredentials/delete",
          "method": "post",
          "text": "Delete",
          "class": "btn-danger btn-sm"
        }
      ]
    },
    {
      "type": "card",
      "id": "add-form",
      "label": "Add Credential",
      "client_requirement": "client_is_administrator+",
      "items": [
        {
          "type": "form",
          "action": "/action/clientcredentials/addedit",
          "method": "post",
          "items": [
            {
              "type": "hidden",
              "name": "row_index",
              "value": ""
            },
            {
              "type": "field",
              "label": "Credential Active",
              "name": "enabled",
              "input_type": "checkbox"
            },
            {
              "type": "raw_html",
              "html": "<script id=\"captive-vlan-data\" type=\"application/json\">%CAPTIVE_VLAN_OPTIONS%</script><script id=\"page-flags\" type=\"application/json\">{\"pro\": %PRO_LICENSE_JS%, \"radius_session_seconds\": %RADIUS_DEFAULT_SESSION_SECONDS_JS%}</script>"
            },
            {
              "type": "field",
              "label": "User Type",
              "name": "user_type",
              "input_type": "select",
              "options": [
                {"value": "",  "label": "-- Select User Type --"},
                {"value": "0", "label": "Captive Portal"},
                {"value": "1", "label": "802.1X Supplicant"}
              ]
            },
            {
              "type": "raw_html",
              "html": "<div id=\"vlan-row\">"
            },
            {
              "type": "field",
              "label": "VLAN",
              "name": "vlan",
              "input_type": "select",
              "options": "%VLAN_OPTIONS%",
              "hint": "VLAN to assign after 802.1X authentication."
            },
            {
              "type": "raw_html",
              "html": "</div>"
            },
            {
              "type": "raw_html",
              "html": "<div id=\"captive-portal-mode-note\" style=\"display:none\"></div>"
            },
            {
              "type": "hr"
            },
            {
              "type": "field_row",
              "cols": 2,
              "items": [
                {
                  "type": "field",
                  "label": "Username",
                  "name": "username",
                  "input_type": "text",
                  "validate": "VALIDATION_DASH_NAME",
                  "hint": "Lowercase letters, digits, and hyphens."
                },
                {
                  "type": "field",
                  "label": "Password",
                  "name": "password",
                  "input_type": "password",
                  "hint": "Leave blank to auto-generate password."
                }
              ]
            },
            {
              "type": "field",
              "label": "Description",
              "name": "description",
              "input_type": "text",
              "hint": "Optional label."
            },
            {
              "type": "hr"
            },
            {
              "type": "field_row",
              "cols": 2,
              "items": [
                {
                  "type": "field",
                  "label": "Valid For",
                  "name": "session_seconds_value",
                  "input_type": "number",
                  "min": 0,
                  "value": "0",
                  "hint": "How long this credential is valid after creation. 0 = no expiration."
                },
                {
                  "type": "field",
                  "label": "Unit",
                  "name": "session_seconds_unit",
                  "input_type": "select",
                  "options": [
                    {"value": "hours", "label": "Hours"},
                    {"value": "days",  "label": "Days"}
                  ]
                }
              ]
            },
            {
              "type": "button_row",
              "items": [
                {
                  "type": "button_primary",
                  "text": "Add Credential",
                  "class": "add-credential-btn",
                  "disabled": "%ADD_CREDENTIAL_DISABLED%"
                },
                {
                  "type": "button_cancel",
                  "text": "Cancel"
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}