My Dialog

Fasthtml_database.ipynb

{"cells": [{"cell_type": "markdown", "metadata": {}, "source": ["I want to learn working with the SQL database that comes with the FastHTML web GUI package that is build by answer.ai.\n", "This notebook will be about initialising this database and manipulating it."], "attachments": {}}, {"cell_type": "code", "metadata": {}, "source": ["from pathlib import Path\n", "from fasthtml.common import *\n", "from monsterui.all import *"], "outputs": [], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["!ls"], "outputs": [{"name": "stdout", "output_type": "stream", "text": [" Dataframes_and_route_calculations.py\r\n", " Keybindingsapp.py\r\n", " Source.gv\r\n", " Source.gv.pdf\r\n", " buttons.yaml\r\n", " data\r\n", " data.db\r\n", " data.db-shm\r\n", " data.db-wal\r\n", " database_schema\r\n", " database_schema.pdf\r\n", " database_schema.png\r\n", " fps_keys.db\r\n", " fps_keys.db-shm\r\n", " fps_keys.db-wal\r\n", "'peilbuizenroute_Primair meetnet blok 2_2025-01-21.xlsx'\r\n", "'peilbuizenroute_Primair meetnet blok 2_2025-01-24.xlsx'\r\n", " static\r\n"]}], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["db = database('fps_keys.db')"], "outputs": [], "execution_count": null}, {"cell_type": "markdown", "metadata": {}, "source": ["How to create a table\n", "\n", "```\n", "db.t.games.create(\n", "        id=int,\n", "        name=str,\n", "        game_type=str,\n", "        image=bytes,\n", "        pk='id',\n", "        not_null=['name'],\n", "        replace=True\n", "    )\n", "```"], "attachments": {}}, {"cell_type": "code", "metadata": {}, "source": ["db.tables"], "outputs": [{"data": {"text/plain": ["[<Table sqlite_stat1 (tbl, idx, stat)>,\n", " <Table sqlite_stat4 (tbl, idx, neq, nlt, ndlt, sample)>,\n", " <Table categories (id, name, description)>,\n", " <Table modifiers (id, name)>,\n", " <Table game_keys (id, name)>,\n", " <Table actions (id, name, description, category_id)>,\n", " <Table bindings (id, game_id, action_id, key_id, modifier_id, description, sort_order)>,\n", " <Table games (id, name, game_type, image)>]"]}, "metadata": {}, "output_type": "execute_result", "execution_count": null}], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["db.tables['bindings'].columns"], "outputs": [{"name": "stdout", "output_type": "stream", "text": ["\u001b[0;31m---------------------------------------------------------------------------\u001b[0m\n", "\u001b[0;31mTypeError\u001b[0m                                 Traceback (most recent call last)\n", "Cell \u001b[0;32mIn[1], line 1\u001b[0m\n", "\u001b[0;32m----> 1\u001b[0m \u001b[43mdb\u001b[49m\u001b[38;5;241;43m.\u001b[39;49m\u001b[43mtables\u001b[49m\u001b[43m[\u001b[49m\u001b[38;5;124;43m'\u001b[39;49m\u001b[38;5;124;43mbindings\u001b[39;49m\u001b[38;5;124;43m'\u001b[39;49m\u001b[43m]\u001b[49m\u001b[38;5;241m.\u001b[39mcolumns\n", "\n", "\u001b[0;31mTypeError\u001b[0m: list indices must be integers or slices, not str\n"]}, {"ename": "TypeError", "evalue": "list indices must be integers or slices, not str", "output_type": "error", "traceback": ["Traceback (most recent call last):\n", "  File \"/usr/local/lib/python3.11/site-packages/IPython/core/interactiveshell.py\", line 3579, in run_code\n    exec(code_obj, self.user_global_ns, self.user_ns)\n", "  File \"<ipython-input-1-4f9efbce600b>\", line 1, in <module>\n    db.tables['bindings'].columns\n    ~~~~~~~~~^^^^^^^^^^^^\n", "TypeError: list indices must be integers or slices, not str\n"]}], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["db.t"], "outputs": [{"data": {"text/plain": ["actions, bindings, categories, game_keys, games, modifiers, sqlite_stat1, sqlite_stat4"]}, "metadata": {}, "output_type": "execute_result", "execution_count": null}], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["db.t['bindings'].columns"], "outputs": [{"data": {"text/plain": ["[Column(cid=0, name='id', type='INTEGER', notnull=0, default_value=None, is_pk=1),\n", " Column(cid=1, name='game_id', type='INTEGER', notnull=1, default_value=None, is_pk=0),\n", " Column(cid=2, name='action_id', type='INTEGER', notnull=1, default_value=None, is_pk=0),\n", " Column(cid=3, name='key_id', type='INTEGER', notnull=1, default_value=None, is_pk=0),\n", " Column(cid=4, name='modifier_id', type='INTEGER', notnull=1, default_value=None, is_pk=0),\n", " Column(cid=5, name='description', type='TEXT', notnull=0, default_value=None, is_pk=0),\n", " Column(cid=6, name='sort_order', type='INTEGER', notnull=0, default_value=None, is_pk=0)]"]}, "metadata": {}, "output_type": "execute_result", "execution_count": null}], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["db.t['bindings'].c"], "outputs": [{"data": {"text/plain": ["action_id, description, game_id, id, key_id, modifier_id, sort_order"]}, "metadata": {}, "output_type": "execute_result", "execution_count": null}], "execution_count": null}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "How to get the value of `name` from the `bindings` tables third item?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "Looking at the database schema shown, I notice that the `bindings` table doesn't actually have a `name` column. The bindings table has these columns:\n", "- id\n", "- game_id \n", "- action_id\n", "- key_id\n", "- modifier_id\n", "\n", "If you want to get the name associated with a binding, you'll need to join with the related tables since this appears to be a relational database. For example, you could join with:\n", "- games table to get game name\n", "- actions table to get action name \n", "- game_keys table to get key name\n", "- modifiers table to get modifier name\n", "\n", "Would you like me to show you how to write a query to get any of these related names for the third binding?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "You're absolutely right. What I actually meant was, how to get the name of the third column."]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "To get the name of the third column in the `bindings` table, you can look at the `.columns` output we saw earlier. The third column (index 2) is `action_id`. \n", "\n", "You can access it using:\n", "\n", "```python\n", "db.t['bindings'].columns[2].name\n", "```\n", "\n", "Or if you just want to see all column names in order, you can use the shorter `.c` property we saw:\n", "```python\n", "db.t['bindings'].c\n", "```\n", "\n", "which showed us: `action_id, game_id, id, key_id, modifier_id`"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "I want to use the nbdev library to write some test. Starting with testing if the column name of the last column in bindings is equal to 'test'"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "I can help you write a test using nbdev. Let's start with a basic test. In nbdev, tests are written in code cells that start with the comment `#|test`. Here's how you could write a test for that column name:\n", "\n", "```python\n", "#|test\n", "test_name = db.t['bindings'].columns[-1].name\n", "assert test_name == 'modifier_id', f\"Expected 'modifier_id', but got '{test_name}'\"\n", "```\n", "\n", "Note that I've written this test to check for 'modifier_id' rather than 'test' since we can see from the schema that 'modifier_id' is the actual last column name. Would you like me to explain how to modify this test for your specific needs, or would you like to learn more about other nbdev testing features?"]}, {"cell_type": "code", "metadata": {}, "source": ["import fastcore.test as fct"], "outputs": [], "execution_count": null}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "I want to use fastcore.test to test if a certain item is in a list."]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "To test if an item is in a list using fastcore.test, you can use `test_eq` with the `in` operator, or more simply use `test_is`. Here's a simple example to get you started:\n", "\n", "```python\n", "from fastcore.test import test_eq\n", "\n", "my_list = [1, 2, 3, 4]\n", "test_eq(2 in my_list, True)\n", "```\n", "\n", "Would you like me to show you more ways to test list membership, or would you like to try writing a test for your specific case?"]}, {"cell_type": "code", "metadata": {}, "source": ["help(db.t['bindings'].add_column)"], "outputs": [{"name": "stdout", "output_type": "stream", "text": ["Help on method add_column in module apswutils.db:\n", "\n", "add_column(col_name: str, col_type: Optional[Any] = None, fk: Optional[str] = None, fk_col: Optional[str] = None, not_null_default: Optional[Any] = None) method of apswutils.db.Table instance\n", "    Add a column to this table. See :ref:`python_api_add_column`.\n", "    \n", "    :param col_name: Name of the new column\n", "    :param col_type: Column type - a Python type such as ``str`` or a SQLite type string such as ``\"BLOB\"``\n", "    :param fk: Name of a table that this column should be a foreign key reference to\n", "    :param fk_col: Column in the foreign key table that this should reference\n", "    :param not_null_default: Set this column to ``not null`` and give it this default value\n", "\n"]}], "execution_count": null}, {"cell_type": "markdown", "metadata": {}, "source": ["code to add column\n", "```\n", "db.t['bindings'].add_column(\"sort_order\", float)\n", "```"], "attachments": {}}, {"cell_type": "code", "metadata": {}, "source": ["db.t['games']()"], "outputs": [{"data": {"text/plain": ["[{'id': 1, 'name': 'default', 'game_type': 'template', 'image': None},\n", " {'id': 2, 'name': 'default', 'game_type': 'template', 'image': None},\n", " {'id': 3, 'name': 'default', 'game_type': 'template', 'image': None},\n", " {'id': 4, 'name': 'default', 'game_type': 'template', 'image': None},\n", " {'id': 5, 'name': 'sandstorm', 'game_type': 'tactical', 'image': None},\n", " {'id': 6, 'name': 'default', 'game_type': 'template', 'image': None},\n", " {'id': 7, 'name': 'default', 'game_type': 'template', 'image': None},\n", " {'id': 8, 'name': 'default', 'game_type': 'template', 'image': None}]"]}, "metadata": {}, "output_type": "execute_result", "execution_count": null}], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["help(db.t.games.drop)"], "outputs": [{"name": "stdout", "output_type": "stream", "text": ["Help on method drop in module apswutils.db:\n", "\n", "drop(ignore: bool = False) method of apswutils.db.Table instance\n", "    Drop this table.\n", "    \n", "    :param ignore: Set to ``True`` to ignore the error if the table does not exist\n", "\n"]}], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["def_bindings = db.t.bindings.rows_where(\"game_id = 1\")"], "outputs": [], "execution_count": null}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "How can I show all the rowns from the `def_bindings` table?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "To show all the rows from `def_bindings`, you can simply print it or examine it directly. Since `def_bindings` was created using `rows_where`, it should contain the query results. Try:\n", "\n", "```python\n", "def_bindings\n", "```\n", "\n", "Would you like me to show you other ways to view or format this data?"]}, {"cell_type": "code", "metadata": {}, "source": ["L(def_bindings)"], "outputs": [{"data": {"text/plain": ["(#351) [{'id': 1, 'game_id': 1, 'action_id': 1, 'key_id': 23, 'modifier_id': 2, 'description': None, 'sort_order': None},{'id': 2, 'game_id': 1, 'action_id': 2, 'key_id': 19, 'modifier_id': 2, 'description': None, 'sort_order': None},{'id': 3, 'game_id': 1, 'action_id': 3, 'key_id': 1, 'modifier_id': 2, 'description': None, 'sort_order': None},{'id': 4, 'game_id': 1, 'action_id': 4, 'key_id': 4, 'modifier_id': 2, 'description': None, 'sort_order': None},{'id': 5, 'game_id': 1, 'action_id': 5, 'key_id': 52, 'modifier_id': 1, 'description': None, 'sort_order': None},{'id': 6, 'game_id': 1, 'action_id': 6, 'key_id': 3, 'modifier_id': 1, 'description': None, 'sort_order': None},{'id': 7, 'game_id': 1, 'action_id': 7, 'key_id': 51, 'modifier_id': 1, 'description': None, 'sort_order': None},{'id': 8, 'game_id': 1, 'action_id': 8, 'key_id': 55, 'modifier_id': 2, 'description': None, 'sort_order': None},{'id': 9, 'game_id': 1, 'action_id': 9, 'key_id': 49, 'modifier_id': 2, 'description': None, 'sort_order': None},{'id': 10, 'game_id': 1, 'action_id': 10, 'key_id': 65, 'modifier_id': 2, 'description': None, 'sort_order': None},{'id': 11, 'game_id': 1, 'action_id': 11, 'key_id': 66, 'modifier_id': 2, 'description': None, 'sort_order': None},{'id': 12, 'game_id': 1, 'action_id': 12, 'key_id': 63, 'modifier_id': 1, 'description': None, 'sort_order': None},{'id': 13, 'game_id': 1, 'action_id': 13, 'key_id': 64, 'modifier_id': 1, 'description': None, 'sort_order': None},{'id': 14, 'game_id': 1, 'action_id': 14, 'key_id': 18, 'modifier_id': 1, 'description': None, 'sort_order': None},{'id': 15, 'game_id': 1, 'action_id': 15, 'key_id': 67, 'modifier_id': 3, 'description': None, 'sort_order': None},{'id': 16, 'game_id': 1, 'action_id': 16, 'key_id': 8, 'modifier_id': 1, 'description': None, 'sort_order': None},{'id': 17, 'game_id': 1, 'action_id': 17, 'key_id': 7, 'modifier_id': 1, 'description': None, 'sort_order': None},{'id': 18, 'game_id': 1, 'action_id': 18, 'key_id': 17, 'modifier_id': 1, 'description': None, 'sort_order': None},{'id': 19, 'game_id': 1, 'action_id': 19, 'key_id': 6, 'modifier_id': 1, 'description': None, 'sort_order': None},{'id': 20, 'game_id': 1, 'action_id': 20, 'key_id': 5, 'modifier_id': 1, 'description': None, 'sort_order': None}...]"]}, "metadata": {}, "output_type": "execute_result", "execution_count": null}], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["def populate_categories(db):\n", "    \"\"\"Populate the categories table with initial data\"\"\"\n", "    categories = [\n", "        ('movement', 'Movement related actions'),\n", "        ('combat', 'Combat related actions'),\n", "        ('interaction', 'Manipulate the environment'),\n", "        ('communication', 'Communicate with friends and bots'),\n", "        ('menu', 'Access the menus')\n", "    ]\n", "    \n", "    for name, description in categories:\n", "        db.t.categories.insert(dict(name=name, description=description))"], "outputs": [], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["def populate_modifiers(db):\n", "    \"\"\"Populate the modifiers table with initial data\"\"\"\n", "    modifiers = ['tap', 'hold', 'scroll', 'double_tap']\n", "    \n", "    for name in modifiers:\n", "        db.t.modifiers.insert(dict(name=name))"], "outputs": [], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["def populate_game_keys(db):\n", "    \"\"\"Populate the game_keys table with initial data\"\"\"\n", "    # Letters\n", "    letters = [chr(i) for i in range(ord('a'), ord('z')+1)]\n", "    \n", "    # Numbers\n", "    numbers = [str(i) for i in range(10)]\n", "    \n", "    # Function keys\n", "    function_keys = [f'f{i}' for i in range(1, 13)]\n", "    \n", "    # Special keys\n", "    special_keys = ['left_alt', 'enter', 'space', 'left_control', 'tab', '.', \n", "                   'left_shift', 'esc', 'del', ';', '-', '`', '=', \"'\",\n", "                   'mouse_left', 'mouse_right', 'mouse_side_front', \n", "                   'mouse_side_back', 'mouse_middle', 'mouse_sniper']\n", "    \n", "    # Add all keys\n", "    for key in letters + numbers + function_keys + special_keys:\n", "        db.t.game_keys.insert(dict(name=key))"], "outputs": [], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["def populate_actions(db):\n", "    \"\"\"Populate the actions table with initial data\"\"\"\n", "    # Get category IDs for reference\n", "    categories = {c['name']: c['id'] for c in db.t.categories()}\n", "    \n", "    actions_by_category = {\n", "        'movement': [\n", "            'Forward', 'Backward', 'Left', 'Right', 'Jump/climb', \n", "            'Crouch', 'Prone', 'Sprint', 'Walk', 'Lean left', 'Lean right'\n", "        ],\n", "        'combat': [\n", "            'Fire primary', 'Aim', 'Reload', 'Switch weapon', \n", "            'Melee', 'Grenade', 'Special', 'Stim'\n", "        ],\n", "        'interaction': ['Use'],\n", "        'communication': ['Voice', 'Text', 'Ping', 'Emote'],\n", "        'menu': ['Menu', 'Map', 'Inventory', 'Special']\n", "    }\n", "    \n", "    # Add all actions with their category IDs\n", "    for category, actions in actions_by_category.items():\n", "        for action in actions:\n", "            db.t.actions.insert(dict(\n", "                name=action,\n", "                category_id=categories[category]\n", "            ))"], "outputs": [], "execution_count": null}, {"cell_type": "markdown", "metadata": {}, "source": ["I will use a `sort_order` column in the bindings table to determing how the keys must be ordered in the list.\n", "I group them according to the `actions categories`.\n", "\n", "- Movement (101-199)\n", "- Combat (201-299)\n", "- Interaction (301-399)\n", "- Communication (401-499)\n", "- Menu (501-599)\n", "\n", "The action categories themselves have the following `sort_order` numbers.\n", "\n", "- Movement=100\n", "- Combat=200\n", "- Interaction=300\n", "- Communication=400\n", "- Menu=500"], "attachments": {}}, {"cell_type": "code", "metadata": {}, "source": ["def create_game(db, game_name='default', game_type='template'):\n", "    \"\"\"Create the default game template with standard bindings\"\"\"\n", "    # Create default game\n", "    db.t.games.insert(dict(\n", "        name=game_name,\n", "        game_type=game_type,\n", "        image=None\n", "    ))\n", "\n", "    # Default bindings dictionary with category-based sort_order\n", "    default_bindings = {\n", "        # The 10^2 numbers are reserved for the category names\n", "        # Movement (101-199)\n", "        'Forward': ('w', 'hold', None, 101),\n", "        'Backward': ('s', 'hold', None, 102),\n", "        'Left': ('a', 'hold', None, 103),\n", "        'Right': ('d', 'hold', None, 104),\n", "        'Jump/climb': ('left_control', 'tap', None, 105),\n", "        'Crouch': ('c', 'tap', None, 106),\n", "        'Prone': ('space', 'tap', None, 107),\n", "        'Sprint': ('left_shift', 'hold', None, 108),\n", "        'Walk': ('left_alt', 'hold', None, 109),\n", "        'Lean left': ('mouse_side_front', 'hold', None, 110),\n", "        'Lean right': ('mouse_side_back', 'hold', None, 111),\n", "        \n", "        # Combat (201-299)\n", "        'Fire primary': ('mouse_left', 'tap', None, 201),\n", "        'Aim': ('mouse_right', 'tap', None, 202),\n", "        'Reload': ('r', 'tap', None, 203),\n", "        'Switch weapon': ('mouse_middle', 'scroll', None, 204),\n", "        'Melee': ('h', 'tap', None, 205),\n", "        'Grenade': ('g', 'tap', None, 206),\n", "        'Special': ('q', 'tap', None, 207),\n", "        'Stim': ('f', 'tap', None, 208),\n", "        \n", "        # Interaction (301-399)\n", "        'Use': ('e', 'tap', None, 301),\n", "        \n", "        # Communication (401-499)\n", "        'Voice': ('t', 'tap', None, 401),\n", "        'Text': ('enter', 'tap', None, 402),\n", "        'Ping': ('z', 'tap', None, 403),\n", "        'Emote': ('b', 'tap', None, 404),\n", "        \n", "        # Menu (501-599)\n", "        'Menu': ('esc', 'tap', None, 501),\n", "        'Map': ('m', 'tap', None, 502),\n", "        'Inventory': ('tab', 'tap', None, 503)\n", "    }\n", "\n", "    # Add all bindings using existing add_binding function\n", "    for action, (key, modifier, description, sort_order) in default_bindings.items():\n", "        add_binding(db, game_name, action, key, modifier, description, sort_order)"], "outputs": [], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["def setup_fresh_db(db):\n", "    \"\"\"Create a fresh database with all initial data\"\"\"\n", "    #create_tables(db)\n", "    populate_categories(db)\n", "    populate_modifiers(db)\n", "    populate_game_keys(db)\n", "    populate_actions(db)\n", "    create_game(db) # default\n", "    create_game(db, 'sandstorm', 'tactical')\n", "    return db"], "outputs": [], "execution_count": null}, {"cell_type": "markdown", "metadata": {}, "source": ["How to get a fresh setup of the tables in an existing connected database.\n", "```\n", "setup_fresh_db(db)\n", "```"], "attachments": {}}, {"cell_type": "code", "metadata": {}, "source": ["db.t.games()"], "outputs": [{"data": {"text/plain": ["[{'id': 1, 'name': 'default', 'game_type': 'template', 'image': None},\n", " {'id': 2, 'name': 'default', 'game_type': 'template', 'image': None},\n", " {'id': 3, 'name': 'default', 'game_type': 'template', 'image': None},\n", " {'id': 4, 'name': 'default', 'game_type': 'template', 'image': None},\n", " {'id': 5, 'name': 'sandstorm', 'game_type': 'tactical', 'image': None},\n", " {'id': 6, 'name': 'default', 'game_type': 'template', 'image': None},\n", " {'id': 7, 'name': 'default', 'game_type': 'template', 'image': None},\n", " {'id': 8, 'name': 'default', 'game_type': 'template', 'image': None}]"]}, "metadata": {}, "output_type": "execute_result", "execution_count": null}], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["def_bindings = db.t.bindings.rows_where(\"game_id = 5\")"], "outputs": [], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["L(def_bindings)"], "outputs": [{"data": {"text/plain": ["(#27) [{'id': 326, 'game_id': 5, 'action_id': 1, 'key_id': 23, 'modifier_id': 2, 'description': None, 'sort_order': 101},{'id': 327, 'game_id': 5, 'action_id': 2, 'key_id': 19, 'modifier_id': 2, 'description': None, 'sort_order': 102},{'id': 328, 'game_id': 5, 'action_id': 3, 'key_id': 1, 'modifier_id': 2, 'description': None, 'sort_order': 103},{'id': 329, 'game_id': 5, 'action_id': 4, 'key_id': 4, 'modifier_id': 2, 'description': None, 'sort_order': 104},{'id': 330, 'game_id': 5, 'action_id': 5, 'key_id': 52, 'modifier_id': 1, 'description': None, 'sort_order': 105},{'id': 331, 'game_id': 5, 'action_id': 6, 'key_id': 3, 'modifier_id': 1, 'description': None, 'sort_order': 106},{'id': 332, 'game_id': 5, 'action_id': 7, 'key_id': 51, 'modifier_id': 1, 'description': None, 'sort_order': 107},{'id': 333, 'game_id': 5, 'action_id': 8, 'key_id': 55, 'modifier_id': 2, 'description': None, 'sort_order': 108},{'id': 334, 'game_id': 5, 'action_id': 9, 'key_id': 49, 'modifier_id': 2, 'description': None, 'sort_order': 109},{'id': 335, 'game_id': 5, 'action_id': 10, 'key_id': 65, 'modifier_id': 2, 'description': None, 'sort_order': 110},{'id': 336, 'game_id': 5, 'action_id': 11, 'key_id': 66, 'modifier_id': 2, 'description': None, 'sort_order': 111},{'id': 337, 'game_id': 5, 'action_id': 12, 'key_id': 63, 'modifier_id': 1, 'description': None, 'sort_order': 201},{'id': 338, 'game_id': 5, 'action_id': 13, 'key_id': 64, 'modifier_id': 1, 'description': None, 'sort_order': 202},{'id': 339, 'game_id': 5, 'action_id': 14, 'key_id': 18, 'modifier_id': 1, 'description': None, 'sort_order': 203},{'id': 340, 'game_id': 5, 'action_id': 15, 'key_id': 67, 'modifier_id': 3, 'description': None, 'sort_order': 204},{'id': 341, 'game_id': 5, 'action_id': 16, 'key_id': 8, 'modifier_id': 1, 'description': None, 'sort_order': 205},{'id': 342, 'game_id': 5, 'action_id': 17, 'key_id': 7, 'modifier_id': 1, 'description': None, 'sort_order': 206},{'id': 343, 'game_id': 5, 'action_id': 18, 'key_id': 17, 'modifier_id': 1, 'description': None, 'sort_order': 207},{'id': 344, 'game_id': 5, 'action_id': 19, 'key_id': 6, 'modifier_id': 1, 'description': None, 'sort_order': 208},{'id': 345, 'game_id': 5, 'action_id': 20, 'key_id': 5, 'modifier_id': 1, 'description': None, 'sort_order': 301}...]"]}, "metadata": {}, "output_type": "execute_result", "execution_count": null}], "execution_count": null}, {"cell_type": "markdown", "metadata": {}, "source": ["Let op: def_bindings is a generator object, dus na je `L(def_bindings)` is `def_bindings` leeg."], "attachments": {}}, {"cell_type": "markdown", "metadata": {}, "source": ["How to add a column to an existing table in the database `db`.\n", "```\n", "db.t.bindings.add_column(\"description\", str)\n", "```"], "attachments": {}}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "How can I best retrieve the value for \"game_id\" from the table \"def_bindings\"?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "Since `def_bindings` is a list of dictionaries, you can access the 'game_id' in a few ways:\n", "\n", "```python\n", "# To get game_id from the first row:\n", "first_game_id = def_bindings[0]['game_id']\n", "\n", "# To get all game_ids:\n", "game_ids = [row['game_id'] for row in def_bindings]\n", "\n", "# Or using L class that's already imported:\n", "game_ids = L(def_bindings).attrgot('game_id')\n", "```\n", "\n", "Looking at your data, all rows have `game_id = 1` since these are the default bindings. Which format would be most useful for your needs?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "def_bindings is actually a generator object, so your proposed solution doesn't work."]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "Ah, you're right - my apologies! Since `def_bindings` is a generator, we need to either convert it to a list first or use it in a different way. Here are the correct ways to access the game_id:\n", "\n", "```python\n", "# Convert to list first then access:\n", "first_binding = list(def_bindings)[0]\n", "first_game_id = first_binding['game_id']\n", "\n", "# Or using L class which handles generators nicely:\n", "game_ids = L(def_bindings).attrgot('game_id')\n", "\n", "# Or iterate through the generator:\n", "for binding in def_bindings:\n", "    game_id = binding['game_id']\n", "    break  # if you only want the first one\n", "```\n", "\n", "Note that once you use a generator, it's \"consumed\", so you might want to store the list if you need to access it multiple times:\n", "```python\n", "bindings_list = list(def_bindings)\n", "```\n", "\n", "Which approach would you prefer to use?"]}, {"cell_type": "code", "metadata": {}, "source": ["def_bindings = db.t.bindings.rows_where(\"game_id = 1\")"], "outputs": [], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["L(def_bindings).attrgot('game_id')[0]"], "outputs": [{"data": {"text/plain": ["1"]}, "metadata": {}, "output_type": "execute_result", "execution_count": null}], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["def_bindings"], "outputs": [{"data": {"text/plain": ["<generator object Queryable.rows_where at 0x727061f66e80>"]}, "metadata": {}, "output_type": "execute_result", "execution_count": null}], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["db.t.categories()"], "outputs": [{"data": {"text/plain": ["[{'id': 1, 'name': 'movement', 'description': 'Movement related actions'},\n", " {'id': 2, 'name': 'combat', 'description': 'Combat related actions'},\n", " {'id': 3, 'name': 'interaction', 'description': 'Manipulate the environment'},\n", " {'id': 4,\n", "  'name': 'communication',\n", "  'description': 'Communicate with friends and bots'},\n", " {'id': 5, 'name': 'menu', 'description': 'Access the menus'}]"]}, "metadata": {}, "output_type": "execute_result", "execution_count": null}], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["db.t.actions"], "outputs": [{"data": {"text/plain": ["<Table actions (id, name, description, category_id)>"]}, "metadata": {}, "output_type": "execute_result", "execution_count": null}], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["{a['id']: a['name'] for a in db.t.actions.rows_where(\"category_id = ?\", [2])}"], "outputs": [{"data": {"text/plain": ["{12: 'Fire primary',\n", " 13: 'Aim',\n", " 14: 'Reload',\n", " 15: 'Switch weapon',\n", " 16: 'Melee',\n", " 17: 'Grenade',\n", " 18: 'Special',\n", " 19: 'Stim'}"]}, "metadata": {}, "output_type": "execute_result", "execution_count": null}], "execution_count": null}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "How to find the rows where \"category_id = 2\" and \"name = 'Aim' or 'Reload' or 'Melee'\"?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "You can use SQL's IN clause to find multiple names in the actions table. Here's how to write the query:\n", "\n", "```python\n", "db.t.actions.rows_where(\"category_id = 2 AND name IN ('Aim', 'Reload', 'Melee')\")\n", "```\n", "\n", "Would you like me to show you how to store or display these results?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "How can I make your sollution work with variables instead of \"category_id = 2 AND name IN ('Aim', 'Reload', 'Melee')\""]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "To use variables with the SQL query, you'll need to use the correct parameter syntax. Here's how to do it:\n", "\n", "```python\n", "category = 2\n", "names = ('Aim', 'Reload', 'Melee')\n", "db.t.actions.rows_where(\"category_id = ? AND name IN (\" + \",\".join(\"?\" * len(names)) + \")\", [category] + list(names))\n", "```\n", "\n", "This will create the correct number of placeholder `?` marks for the IN clause. Would you like me to explain how this works, or would you like to try it first?"]}, {"cell_type": "code", "metadata": {}, "source": ["select_string = \"category_id = 2 AND name IN ('Aim', 'Reload', 'Melee')\"\n", "L(db.t.actions.rows_where(select_string))"], "outputs": [{"data": {"text/plain": ["(#3) [{'id': 13, 'name': 'Aim', 'description': None, 'category_id': 2},{'id': 14, 'name': 'Reload', 'description': None, 'category_id': 2},{'id': 16, 'name': 'Melee', 'description': None, 'category_id': 2}]"]}, "metadata": {}, "output_type": "execute_result", "execution_count": null}], "execution_count": null}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "How to get the 'name' of the item with 'id'=1 from the table `db.t.categories`?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "To get the name of the category with id=1, you can use the `rows_where` method with a WHERE clause. Here's how:\n", "\n", "```python\n", "category = db.t.categories.rows_where(\"id = ?\", [1])\n", "category_name = list(category)[0]['name']\n", "```\n", "\n", "Or more concisely using L:\n", "```python\n", "category_name = L(db.t.categories.rows_where(\"id = ?\", [1])).attrgot('name')[0]\n", "```\n", "\n", "Would you like me to explain how this works?"]}, {"cell_type": "code", "metadata": {}, "source": ["action_category_id = 2\n", "cat_actions = db.t.actions.rows_where(\"category_id = ?\", [action_category_id])"], "outputs": [], "execution_count": null}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "How to get all the `id`s from the `cat_actions`?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "Since `cat_actions` is a generator, you can get all the ids in a few ways:\n", "\n", "```python\n", "# Using L class (recommended since it's already imported):\n", "action_ids = L(cat_actions).attrgot('id')\n", "\n", "# Or as a list comprehension:\n", "action_ids = [action['id'] for action in cat_actions]\n", "```\n", "\n", "Remember that since `cat_actions` is a generator, you can only iterate over it once. Which method would you prefer to use?"]}, {"cell_type": "code", "metadata": {}, "source": ["action_ids = L(cat_actions).attrgot('id')\n", "action_ids"], "outputs": [{"data": {"text/plain": ["(#8) [12,13,14,15,16,17,18,19]"]}, "metadata": {}, "output_type": "execute_result", "execution_count": null}], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["game_id = 5\n", "select_string = f\"game_id = {game_id} AND action_id IN {tuple(action_ids)}\"\n", "L(db.t.bindings.rows_where(select_string))"], "outputs": [{"data": {"text/plain": ["(#8) [{'id': 337, 'game_id': 5, 'action_id': 12, 'key_id': 63, 'modifier_id': 1, 'description': None, 'sort_order': 201},{'id': 338, 'game_id': 5, 'action_id': 13, 'key_id': 64, 'modifier_id': 1, 'description': None, 'sort_order': 202},{'id': 339, 'game_id': 5, 'action_id': 14, 'key_id': 18, 'modifier_id': 1, 'description': None, 'sort_order': 203},{'id': 340, 'game_id': 5, 'action_id': 15, 'key_id': 67, 'modifier_id': 3, 'description': None, 'sort_order': 204},{'id': 341, 'game_id': 5, 'action_id': 16, 'key_id': 8, 'modifier_id': 1, 'description': None, 'sort_order': 205},{'id': 342, 'game_id': 5, 'action_id': 17, 'key_id': 7, 'modifier_id': 1, 'description': None, 'sort_order': 206},{'id': 343, 'game_id': 5, 'action_id': 18, 'key_id': 17, 'modifier_id': 1, 'description': None, 'sort_order': 207},{'id': 344, 'game_id': 5, 'action_id': 19, 'key_id': 6, 'modifier_id': 1, 'description': None, 'sort_order': 208}]"]}, "metadata": {}, "output_type": "execute_result", "execution_count": null}], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["def create_binding_table_category(db, game_id, action_category_id):\n", "    \"\"\"Helper function to create the bindings table for a given action category\"\"\"\n", "    # Get all categories and create lookup dicts\n", "    cat_actions = db.t.actions.rows_where(\"category_id = ?\", [action_category_id])\n", "    action_ids = L(cat_actions).attrgot(\"id\")\n", "\n", "    cat_name = L(db.t.categories.rows_where(\"id = ?\", [action_category_id])).attrgot('name')[0]\n", "\n", "    # Create table with category groups\n", "    table_heading = Tr(\n", "        Th(\"  \", style=\"width:10px;\"),\n", "        Th(\"Action\"),\n", "        Th(\"Key\"),\n", "        Th(\"Modifier\"),\n", "        Th(\"Game native description\"),\n", "        Th(\"Actions\")\n", "    )\n", "\n", "    text_style = TextT.justify\n", "\n", "    rows = []\n", "       \n", "    # Add bindings for this category\n", "    action_ids_str = ','.join(str(id) for id in action_ids)\n", "    where_string = f\"game_id = {game_id} AND action_id IN ({action_ids_str})\"\n", "\n", "    for b in db.t.bindings.rows_where(where_string):\n", "        b_id = b['id']\n", "\n", "        rows.append(Tr(\n", "            Td(\"\u22ee\u22ee\", style=\"width: 10px;\"),\n", "            Td(next(db.t.actions.rows_where(\"id = ?\", [b['action_id']]))['name'],\n", "                cls=text_style),\n", "            Td(next(db.t.game_keys.rows_where(\"id = ?\", [b['key_id']]))['name'],\n", "                cls=text_style),\n", "            Td(next(db.t.modifiers.rows_where(\"id = ?\", [b['modifier_id']]))['name'],\n", "                cls=text_style),\n", "            Td(b['description'],\n", "                cls=text_style),\n", "            Td(Button(\"Edit\", \n", "                    hx_get=f\"/binding/{b_id}/edit\",\n", "                    hx_target=\"#bindings-table\",\n", "                    cls=ButtonT.secondary),\n", "                Button(\"Delete\", \n", "                    hx_delete=f\"/binding/{b['id']}/delete\",\n", "                    hx_target=\"#bindings-table\",\n", "                    cls=ButtonT.destructive),\n", "                cls=\"space-x-2\")\n", "            )\n", "        )\n", "    \n", "    return Div(P(cat_name, cls=(TextT.lg, TextT.bold, TextT.primary, TextT.center)), Table(Thead(table_heading), Tbody(*rows), cls=(TableT.hover, TableT.sm, TableT.striped)))"], "outputs": [], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["action_category_id = 2\n", "game_id = 5\n", "show(Div(create_binding_table_category(db, game_id, action_category_id), id=f\"bindings-table-cat{action_category_id}\"))"], "outputs": [{"data": {"text/plain": ["<IPython.core.display.HTML object>"], "text/html": ["<div id=\"bindings-table-cat2\">\n", "  <div>\n", "    <p class=\"text-lg font-bold text-primary text-center\">combat</p>\n", "    <table class=\"uk-table uk-table-hover uk-table-sm uk-table-striped\">\n", "      <thead>\n", "        <tr>\n", "          <th style=\"width:10px;\">  </th>\n", "          <th>Action</th>\n", "          <th>Key</th>\n", "          <th>Modifier</th>\n", "          <th>Game native description</th>\n", "          <th>Actions</th>\n", "        </tr>\n", "      </thead>\n", "      <tbody>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Fire primary</td>\n", "          <td class=\"text-justify\">mouse_left</td>\n", "          <td class=\"text-justify\">tap</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/337/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/337/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Aim</td>\n", "          <td class=\"text-justify\">mouse_right</td>\n", "          <td class=\"text-justify\">tap</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/338/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/338/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Reload</td>\n", "          <td class=\"text-justify\">r</td>\n", "          <td class=\"text-justify\">tap</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/339/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/339/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Switch weapon</td>\n", "          <td class=\"text-justify\">mouse_middle</td>\n", "          <td class=\"text-justify\">scroll</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/340/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/340/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Melee</td>\n", "          <td class=\"text-justify\">h</td>\n", "          <td class=\"text-justify\">tap</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/341/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/341/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Grenade</td>\n", "          <td class=\"text-justify\">g</td>\n", "          <td class=\"text-justify\">tap</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/342/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/342/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Special</td>\n", "          <td class=\"text-justify\">q</td>\n", "          <td class=\"text-justify\">tap</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/343/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/343/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Stim</td>\n", "          <td class=\"text-justify\">f</td>\n", "          <td class=\"text-justify\">tap</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/344/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/344/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "      </tbody>\n", "    </table>\n", "  </div>\n", "</div>\n"]}, "metadata": {}, "output_type": "display_data"}], "execution_count": null}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "Now I want a function that creates this table for `action_category` and places them all in beneath each other. I don't know if I should use Container or Div or something else. Please help me write this function and help me decide which HTML tag I can best use to place these tables under each other."]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "I can help you create a function that stacks these tables. Since we want to stack elements vertically, a `Div` would work well as it's a block-level element (each element appears on a new line). Here's a suggested approach:\n", "\n", "```python\n", "def create_all_binding_tables(db, game_id):\n", "    \"\"\"Create tables for all action categories and stack them vertically\"\"\"\n", "    # Get all unique category IDs\n", "    categories = db.t.categories.rows_where(\"id IN (SELECT DISTINCT category_id FROM actions)\")\n", "    category_ids = L(categories).attrgot('id')\n", "    \n", "    # Create a table for each category\n", "    tables = [create_binding_table_category(db, game_id, cat_id) for cat_id in category_ids]\n", "    \n", "    # Stack tables in a container div\n", "    return Div(*tables, id=\"all-bindings-tables\")\n", "```\n", "\n", "You can then display it with:\n", "```python\n", "show(create_all_binding_tables(db, game_id))\n", "```\n", "\n", "Would you like me to explain how this works, or would you like to try it first and see if you need any adjustments?"]}, {"cell_type": "code", "metadata": {}, "source": ["# Running of this notebook add the categories to the exsinting table. This line deletes those\n", "db.t.categories.delete_where(\"id >= 6 AND id <= 20\")"], "outputs": [{"data": {"text/plain": ["<Table categories (id, name, description)>"]}, "metadata": {}, "output_type": "execute_result", "execution_count": null}], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["def create_all_binding_tables(db, game_id):\n", "    \"\"\"Create tables for all action categories and stack them vertically\"\"\"\n", "    # Get all unique category IDs\n", "    categories = db.t.categories.rows_where(\"id IN (SELECT DISTINCT category_id FROM actions)\")\n", "    category_ids = L(categories).attrgot('id')\n", "    \n", "    # Create a table for each category\n", "    tables = [create_binding_table_category(db, game_id, cat_id) for cat_id in category_ids]\n", "    \n", "    # Stack tables in a container div\n", "    return Div(*tables, id=\"all-bindings-tables\")"], "outputs": [], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["show(create_all_binding_tables(db, game_id))"], "outputs": [{"data": {"text/plain": ["<IPython.core.display.HTML object>"], "text/html": ["<div id=\"all-bindings-tables\">\n", "  <div>\n", "    <p class=\"text-lg font-bold text-primary text-center\">movement</p>\n", "    <table class=\"uk-table uk-table-hover uk-table-sm uk-table-striped\">\n", "      <thead>\n", "        <tr>\n", "          <th style=\"width:10px;\">  </th>\n", "          <th>Action</th>\n", "          <th>Key</th>\n", "          <th>Modifier</th>\n", "          <th>Game native description</th>\n", "          <th>Actions</th>\n", "        </tr>\n", "      </thead>\n", "      <tbody>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Forward</td>\n", "          <td class=\"text-justify\">w</td>\n", "          <td class=\"text-justify\">hold</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/326/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/326/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Backward</td>\n", "          <td class=\"text-justify\">s</td>\n", "          <td class=\"text-justify\">hold</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/327/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/327/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Left</td>\n", "          <td class=\"text-justify\">a</td>\n", "          <td class=\"text-justify\">hold</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/328/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/328/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Right</td>\n", "          <td class=\"text-justify\">d</td>\n", "          <td class=\"text-justify\">hold</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/329/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/329/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Jump/climb</td>\n", "          <td class=\"text-justify\">left_control</td>\n", "          <td class=\"text-justify\">tap</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/330/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/330/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Crouch</td>\n", "          <td class=\"text-justify\">c</td>\n", "          <td class=\"text-justify\">tap</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/331/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/331/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Prone</td>\n", "          <td class=\"text-justify\">space</td>\n", "          <td class=\"text-justify\">tap</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/332/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/332/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Sprint</td>\n", "          <td class=\"text-justify\">left_shift</td>\n", "          <td class=\"text-justify\">hold</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/333/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/333/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Walk</td>\n", "          <td class=\"text-justify\">left_alt</td>\n", "          <td class=\"text-justify\">hold</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/334/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/334/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Lean left</td>\n", "          <td class=\"text-justify\">mouse_side_front</td>\n", "          <td class=\"text-justify\">hold</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/335/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/335/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Lean right</td>\n", "          <td class=\"text-justify\">mouse_side_back</td>\n", "          <td class=\"text-justify\">hold</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/336/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/336/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "      </tbody>\n", "    </table>\n", "  </div>\n", "  <div>\n", "    <p class=\"text-lg font-bold text-primary text-center\">combat</p>\n", "    <table class=\"uk-table uk-table-hover uk-table-sm uk-table-striped\">\n", "      <thead>\n", "        <tr>\n", "          <th style=\"width:10px;\">  </th>\n", "          <th>Action</th>\n", "          <th>Key</th>\n", "          <th>Modifier</th>\n", "          <th>Game native description</th>\n", "          <th>Actions</th>\n", "        </tr>\n", "      </thead>\n", "      <tbody>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Fire primary</td>\n", "          <td class=\"text-justify\">mouse_left</td>\n", "          <td class=\"text-justify\">tap</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/337/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/337/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Aim</td>\n", "          <td class=\"text-justify\">mouse_right</td>\n", "          <td class=\"text-justify\">tap</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/338/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/338/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Reload</td>\n", "          <td class=\"text-justify\">r</td>\n", "          <td class=\"text-justify\">tap</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/339/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/339/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Switch weapon</td>\n", "          <td class=\"text-justify\">mouse_middle</td>\n", "          <td class=\"text-justify\">scroll</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/340/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/340/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Melee</td>\n", "          <td class=\"text-justify\">h</td>\n", "          <td class=\"text-justify\">tap</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/341/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/341/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Grenade</td>\n", "          <td class=\"text-justify\">g</td>\n", "          <td class=\"text-justify\">tap</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/342/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/342/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Special</td>\n", "          <td class=\"text-justify\">q</td>\n", "          <td class=\"text-justify\">tap</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/343/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/343/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Stim</td>\n", "          <td class=\"text-justify\">f</td>\n", "          <td class=\"text-justify\">tap</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/344/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/344/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "      </tbody>\n", "    </table>\n", "  </div>\n", "  <div>\n", "    <p class=\"text-lg font-bold text-primary text-center\">interaction</p>\n", "    <table class=\"uk-table uk-table-hover uk-table-sm uk-table-striped\">\n", "      <thead>\n", "        <tr>\n", "          <th style=\"width:10px;\">  </th>\n", "          <th>Action</th>\n", "          <th>Key</th>\n", "          <th>Modifier</th>\n", "          <th>Game native description</th>\n", "          <th>Actions</th>\n", "        </tr>\n", "      </thead>\n", "      <tbody>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Use</td>\n", "          <td class=\"text-justify\">e</td>\n", "          <td class=\"text-justify\">tap</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/345/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/345/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "      </tbody>\n", "    </table>\n", "  </div>\n", "  <div>\n", "    <p class=\"text-lg font-bold text-primary text-center\">communication</p>\n", "    <table class=\"uk-table uk-table-hover uk-table-sm uk-table-striped\">\n", "      <thead>\n", "        <tr>\n", "          <th style=\"width:10px;\">  </th>\n", "          <th>Action</th>\n", "          <th>Key</th>\n", "          <th>Modifier</th>\n", "          <th>Game native description</th>\n", "          <th>Actions</th>\n", "        </tr>\n", "      </thead>\n", "      <tbody>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Voice</td>\n", "          <td class=\"text-justify\">t</td>\n", "          <td class=\"text-justify\">tap</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/346/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/346/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Text</td>\n", "          <td class=\"text-justify\">enter</td>\n", "          <td class=\"text-justify\">tap</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/347/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/347/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Ping</td>\n", "          <td class=\"text-justify\">z</td>\n", "          <td class=\"text-justify\">tap</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/348/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/348/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Emote</td>\n", "          <td class=\"text-justify\">b</td>\n", "          <td class=\"text-justify\">tap</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/349/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/349/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "      </tbody>\n", "    </table>\n", "  </div>\n", "  <div>\n", "    <p class=\"text-lg font-bold text-primary text-center\">menu</p>\n", "    <table class=\"uk-table uk-table-hover uk-table-sm uk-table-striped\">\n", "      <thead>\n", "        <tr>\n", "          <th style=\"width:10px;\">  </th>\n", "          <th>Action</th>\n", "          <th>Key</th>\n", "          <th>Modifier</th>\n", "          <th>Game native description</th>\n", "          <th>Actions</th>\n", "        </tr>\n", "      </thead>\n", "      <tbody>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Menu</td>\n", "          <td class=\"text-justify\">esc</td>\n", "          <td class=\"text-justify\">tap</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/350/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/350/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Map</td>\n", "          <td class=\"text-justify\">m</td>\n", "          <td class=\"text-justify\">tap</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/351/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/351/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "        <tr>\n", "          <td style=\"width: 10px;\">\u22ee\u22ee</td>\n", "          <td class=\"text-justify\">Inventory</td>\n", "          <td class=\"text-justify\">tab</td>\n", "          <td class=\"text-justify\">tap</td>\n", "          <td class=\"text-justify\"></td>\n", "          <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/352/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/352/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>          </td>\n", "        </tr>\n", "      </tbody>\n", "    </table>\n", "  </div>\n", "</div>\n"]}, "metadata": {}, "output_type": "display_data"}], "execution_count": null}, {"cell_type": "markdown", "metadata": {}, "source": ["Great. I now have this table. I want to add the option that the user can reorder the rows with drag and drop."], "attachments": {}}, {"cell_type": "markdown", "metadata": {}, "source": ["Score: 1.00 -- <a href=\"https://raw.githubusercontent.com/AnswerDotAI/fasthtml/main/examples/adv_app.py\" target=\"_blank\">Detailed walk-thru of a complete CRUD app in FastHTML showing idiomatic use of FastHTML and HTMX patterns.</a>\n", "\n", "---\n", "\n", "###\n", "\n", "\n", "# This handler is called when a POST request is made to the `/login` path.\n", "# The `login` argument is an instance of the `Login` class, which has been auto-instantiated from the form data.\n", "# There are a number of special parameter names, which will be passed useful information about the request:\n", "# `session`: the Starlette session; `request`: the Starlette request; `auth`: the value of `scope['auth']`,\n", "# `htmx`: the HTMX headers, if any; `app`: the FastHTML app object.\n", "# You can also pass any string prefix of `request` or `session`.\n", "@rt(\"/login\")\n", "def post(login:Login, sess):\n", "    if not login.name or not login.pwd: return login_redir\n", "    # Indexing into a MiniDataAPI table queries by primary key, which is `name` here.\n", "    # It returns a dataclass object, if `dataclass()` has been called at some point, or a dict otherwise.\n", "    try: u = users[login.name]\n", "    # If the primary key does not exist, the method raises a `NotFoundError`.\n", "    # Here we use this to just generate a user -- in practice you'd probably to redirect to a signup page.\n", "    except NotFoundError: u = users.insert(login)\n", "    # This compares the passwords using a constant time string comparison\n", "    # https://sqreen.github.io/DevelopersSecurityBestPractices/timing-attack/python\n", "    if not compare_digest(u.pwd.encode(\"utf-8\"), login.pwd.encode(\"utf-8\")): return login_redir\n", "    # Because the session is signed, we can securely add information to it. It's stored in the browser cookies.\n", "    # If you don't pass a secret signing key to `FastHTML`, it will auto-generate one and store it in a file `./sesskey`.\n", "    sess['auth'] = u.name\n", "    return RedirectResponse('/', status_code=303)\n", "\n", "# Instead of using `app.route` (or the `rt` shortcut), you can also use `app.get`, `app.post`, etc.\n", "# In this case, the function name is not used to determine the HTTP verb.\n", "@app.get(\"/logout\")\n", "def logout(sess):\n", "    del sess['auth']\n", "    return login_redir\n", "\n", "# FastHTML uses Starlette's path syntax, and adds a `static` type which matches standard static file extensions.\n", "# You can define your own regex path specifiers -- for instance this is how `static` is defined in FastHTML\n", "# `reg_re_param(\"static\", \"ico|gif|jpg|jpeg|webm|css|js|woff|png|svg|mp4|webp|ttf|otf|eot|woff2|txt|xml|html\")`\n", "# In this app, we only actually have one static file, which is `favicon.ico`. But it would also be needed if\n", "# we were referencing images, CSS/JS files, etc.\n", "# Note, this function is unnecessary, as the `fast_app()` call already includes this functionality.\n", "# However, it's included here to show how you can define your own static file handler.\n", "@rt(\"/{fname:path}.{ext:static}\")\n", "def get(fname:str, ext:str): return FileResponse(f'{fname}.{ext}')\n", "\n", "# The `patch` decorator, which is defined in `fastcore`, adds a method to an existing class.\n", "# Here we are adding a method to the `Todo` class, which is returned by the `todos` table.\n", "# The `__ft__` method is a special method that FastHTML uses to convert the object into an `FT` object,\n", "# so that it can be composed into an FT tree, and later rendered into HTML.\n", "@patch\n", "def __ft__(self:Todo):\n", "    # Some FastHTML tags have an 'X' suffix, which means they're \"extended\" in some way.\n", "    # For instance, here `AX` is an extended `A` tag, which takes 3 positional arguments:\n", "    # `(text, hx_get, target_id)`.\n", "    # All underscores in FT attrs are replaced with hyphens, so this will create an `hx-get` attr,\n", "    # which HTMX uses to trigger a GET request.\n", "    # Generally, most of your route handlers in practice (as in this demo app) are likely to be HTMX handlers.\n", "    # For instance, for this demo, we only have two full-page handlers: the '/login' and '/' GET handlers.\n", "    show = AX(self.title, f'/todos/{self.id}', 'current-todo')\n", "    edit = AX('edit',     f'/edit/{self.id}' , 'current-todo')\n", "    dt = '\u2705 ' if self.done else ''\n", "    # FastHTML provides some shortcuts. For instance, `Hidden` is defined as simply:\n", "    # `return Input(type=\"hidden\", value=value, **kwargs)`\n", "    cts = (dt, show, ' | ', edit, Hidden(id=\"id\", value=self.id), Hidden(id=\"priority\", value=\"0\"))\n", "    # Any FT object can take a list of children as positional args, and a dict of attrs as keyword args.\n", "    return Li(*cts, id=f'todo-{self.id}')\n", "\n", "# This is the handler for the main todo list application.\n", "# By including the `auth` parameter, it gets passed the current username, for displaying in the title.\n", "@rt(\"/\")\n", "def get(auth):\n", "    title = f\"{auth}'s Todo list\"\n", "    top = Grid(H1(title), Div(A('logout', href='/logout'), style='text-align: right'))\n", "    # We don't normally need separate \"screens\" for adding or editing data. Here for instance,\n", "    # we're using an `hx-post` to add a new todo, which is added to the start of the list (using 'afterbegin').\n", "    new_inp = Input(id=\"new-title\", name=\"title\", placeholder=\"New Todo\")\n", "    add = Form(Group(new_inp, Button(\"Add\")),\n", "               hx_post=\"/\", target_id='todo-list', hx_swap=\"afterbegin\")\n", "    # In the MiniDataAPI spec, treating a table as a callable (i.e with `todos(...)` here) queries the table.\n", "    # Because we called `xtra` in our Beforeware, this queries the todos for the current user only.\n", "    # We can include the todo objects directly as children of the `Form`, because the `Todo` class has `__ft__` defined.\n", "    # This is automatically called by FastHTML to convert the `Todo` objects into `FT` objects when needed.\n", "    # The reason we put the todo list inside a form is so that we can use the 'sortable' js library to reorder them.\n", "    # That library calls the js `end` event when dragging is complete, so our trigger here causes our `/reorder`\n", "    # handler to be called.\n", "    frm = Form(*todos(order_by='priority'),\n", "               id='todo-list', cls='sortable', hx_post=\"/reorder\", hx_trigger=\"end\")\n", "    # We create an empty 'current-todo' Div at the bottom of our page, as a target for the details and editing views.\n", "    card = Card(Ul(frm), header=add, footer=Div(id='current-todo'))\n", "    # PicoCSS uses `<Main class='container'>` page content; `Container` is a tiny function that generates that.\n", "    # A handler can return either a single `FT` object or string, or a tuple of them.\n", "    # In the case of a tuple, the stringified objects are concatenated and returned to the browser.\n", "    # The `Title` tag has a special purpose: it sets the title of the page.\n", "    return Title(title), Container(top, card)\n", "\n", "# This is the handler for the reordering of todos.\n", "# It's a POST request, which is used by the 'sortable' js library.\n", "# Because the todo list form created earlier included hidden inputs with the todo IDs,\n", "# they are passed as form data. By using a parameter called (e.g) \"id\", FastHTML will try to find\n", "# something suitable in the request with this name. In order, it searches as follows:\n", "# path; query; cookies; headers; session keys; form data.\n", "# Although all these are provided in the request as strings, FastHTML will use your parameter's type\n", "# annotation to try to cast the value to the requested type.\n", "# In the case of form data, there can be multiple values with the same key. So in this case,\n", "# the parameter is a list of ints.\n", "@rt(\"/reorder\")\n", "def post(id:list[int]):\n", "    for i,id_ in enumerate(id): todos.update({'priority':i}, id_)\n", "    # HTMX by default replaces the inner HTML of the calling element, which in this case is the todo list form.\n", "    # Therefore, we return the list of todos, now in the correct order, which will be auto-converted to FT for us.\n", "    # In this case, it's not strictly necessary, because sortable.js has already reorder the DOM elements.\n", "    # However, by returning the updated data, we can be assured that there aren't sync issues between the DOM\n", "    # and the server.\n", "    return tuple(todos(order_by='priority'))\n", "\n", "----\n", "\n", "Library: FastHTML - Examples (FastHTML is a python library which brings together Starlette, Uvicorn, HTMX, and fastcore's `FT` \"FastTags\" into a library for creating server-rendered hypermedia applications. The `FastHTML` class itself inherits from `Starlette`, and adds decorator-based routing with many additions, Beforeware, automatic `FT` to HTML rendering, and much more.); Document: Todo list application (Detailed walk-thru of a complete CRUD app in FastHTML showing idiomatic use of FastHTML and HTMX patterns.)"], "attachments": {}}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "Okay. Please help me add the drag and reorder functionality. I already have a column 'sort_order' in the 'bindings' table. I think we should use that."]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "I'll help you add drag and drop reordering functionality. We'll need to:\n", "\n", "1. First, add the necessary JavaScript library (Sortable.js)\n", "2. Make the table body sortable\n", "3. Handle the reordering on the backend\n", "\n", "Let's start with step 1. Would you like me to show you how to include Sortable.js and make your table rows draggable?\n", "\n", "After you confirm, we can proceed with implementing the backend logic to update the sort_order values when rows are reordered."]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "Yes. Please show and explain step 1.\n", "I believe we can import it like so:\n", "app, rt = fast_app(hdrs=(SortableJS('.sortable')))\n", "\n", "Am I correct?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "Yes, you're correct! That's exactly how you can include Sortable.js in a FastHTML application. The `SortableJS('.sortable')` header will automatically include the Sortable.js library and initialize it on elements with the 'sortable' class.\n", "\n", "To make your table's body sortable, you'll need to:\n", "1. Add the 'sortable' class to your table's tbody\n", "2. Add an ID to the tbody for targeting with HTMX\n", "\n", "Would you like me to show you how to modify your table creation code to include these changes?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "Yes please."]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "Looking at your current table creation code, we'll modify the Tbody part. Here's how to change it:\n", "\n", "```python\n", "# In your create_binding_table_category function, modify the Table creation:\n", "return Div(\n", "    P(cat_name, cls=(TextT.lg, TextT.bold, TextT.primary, TextT.center)), \n", "    Table(\n", "        Thead(table_heading), \n", "        Tbody(*rows, cls='sortable', id=f'sortable-tbody-{action_category_id}'), \n", "        cls=(TableT.hover, TableT.sm, TableT.striped)\n", "    )\n", ")\n", "```\n", "\n", "This adds the 'sortable' class and a unique ID to the tbody. Would you like me to explain the next step for handling the reordering events?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "Yes please. Make sure that we build this in such a way that different games can have different orders."]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "To handle reordering while keeping separate orders for different games, we'll need to:\n", "\n", "1. Add HTMX attributes to the tbody to handle the reordering event\n", "2. Create a backend route that receives the new order and updates the sort_order values\n", "\n", "For the first part, let's modify the Tbody to include HTMX attributes:\n", "\n", "```python\n", "Tbody(*rows, \n", "      cls='sortable', \n", "      id=f'sortable-tbody-{action_category_id}',\n", "      hx_post=f\"/game/{game_id}/reorder_bindings/{action_category_id}\",\n", "      hx_trigger=\"end\",\n", "      hx_swap=\"none\")\n", "```\n", "\n", "This will send a POST request when the sorting ends, including both the game_id and action_category_id.\n", "\n", "Would you like me to show you how to create the backend route handler next?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "I need to return a sorted `*rows` based on the column `sort_order`. How do I sort?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "To sort the rows based on the `sort_order` column, you can modify your query when getting the bindings. In your `create_binding_table_category` function, where you get the bindings, add `ORDER BY sort_order`:\n", "\n", "```python\n", "where_string = f\"game_id = {game_id} AND action_id IN ({action_ids_str}) ORDER BY sort_order\"\n", "```\n", "\n", "Or if you already have the rows and need to sort them, you can sort the bindings list before creating the rows:\n", "```python\n", "bindings = sorted(db.t.bindings.rows_where(where_string), key=lambda x: x['sort_order'])\n", "```\n", "\n", "Which approach would you prefer to use? The first one is generally more efficient since the sorting happens in the database."]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "How can I see the location of the database I initialized?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "You can see which database file you're currently using by checking the database path. Since you initialized your database with:\n", "\n", "```python\n", "db = database('fps_keys.db')\n", "```\n", "\n", "The database is in a file called 'fps_keys.db' in your current working directory. You can verify this with:\n", "\n", "```python\n", "print(db.path)\n", "```\n", "\n", "Would you like me to show you other ways to inspect your database connection?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "Ok. So now I return this:\n", "\n", "```\n", "return Div(P(cat_name, cls=(TextT.lg, TextT.bold, TextT.primary, TextT.center)), \n", "               Table(Thead(table_heading),\n", "                     Tbody(*rows,\n", "                           cls='sortable',\n", "                           id=f\"sortable-tbody-{action_category_id}\",\n", "                           hx_post=\"/reorder_bindings\",\n", "                           hx_trigger=\"end\"),\n", "               cls=(TableT.hover, TableT.sm, TableT.striped)))\n", "```\n", "\n", "Which points to\n", "\n", "```\n", "@rt(\"/reorder_bindings\")\n", "def post(id: list[int]):\n", "    for i, id_ in enumerate(id):\n", "        db.t.bindings.update(\n", "            {'sort_order': i},\n", "            id_)\n", "    \n", "    return \"\" # Empty response since we use hx-swap=\"none\"\n", "```\n", "\n", "But I really don't understand how this will now which numbers to update.\n", "It seems the Python program doesn't know either, because I get this error.\n", "\n", "```\n", "INFO:     127.0.0.1:44978 - \"POST /reorder_bindings HTTP/1.1\" 400 Bad Request\n", "```"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "The error occurs because we need to send the IDs of the reordered rows to the backend. Currently, there's no way for the backend to know which rows were reordered. We need to:\n", "\n", "1. Add hidden inputs with the binding IDs in each row\n", "2. Make sure the form data is sent when reordering\n", "\n", "Let's modify the row creation first. In your row creation code, add a hidden input with the binding ID:\n", "\n", "```python\n", "rows.append(Tr(\n", "    Td(\"\u22ee\u22ee\", style=\"width: 10px;\"),\n", "    Td(next(db.t.actions.rows_where(\"id = ?\", [b['action_id']]))['name'],\n", "        cls=text_style),\n", "    Td(next(db.t.game_keys.rows_where(\"id = ?\", [b['key_id']]))['name'],\n", "        cls=text_style),\n", "    Td(next(db.t.modifiers.rows_where(\"id = ?\", [b['modifier_id']]))['name'],\n", "        cls=text_style),\n", "    Td(b['description'],\n", "        cls=text_style),\n", "    Td(Button(\"Edit\", \n", "            hx_get=f\"/binding/{b_id}/edit\",\n", "            hx_target=\"#bindings-table\",\n", "            cls=ButtonT.secondary),\n", "        Button(\"Delete\", \n", "            hx_delete=f\"/binding/{b['id']}/delete\",\n", "            hx_target=\"#bindings-table\",\n", "            cls=ButtonT.destructive),\n", "        cls=\"space-x-2\"),\n", "    Hidden(name=\"binding_id\", value=b_id)  # Add this line\n", "    )\n", ")\n", "```\n", "\n", "Would you like me to show you how to modify the table wrapper to ensure these IDs are sent to the backend?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "yes please"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "We need to wrap the table in a Form to send the data. Here's how to modify your return statement:\n", "\n", "```python\n", "return Div(\n", "    P(cat_name, cls=(TextT.lg, TextT.bold, TextT.primary, TextT.center)), \n", "    Form(\n", "        Table(\n", "            Thead(table_heading),\n", "            Tbody(*rows,\n", "                  cls='sortable',\n", "                  id=f\"sortable-tbody-{action_category_id}\"),\n", "            cls=(TableT.hover, TableT.sm, TableT.striped)\n", "        ),\n", "        hx_post=\"/reorder_bindings\",\n", "        hx_trigger=\"end from:tbody\",\n", "        hx_swap=\"none\"\n", "    )\n", ")\n", "```\n", "\n", "Now the backend route will receive the binding_ids in order. Would you like me to show you how to modify the backend route to handle these IDs?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "yes please"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "Here's how to modify the backend route to handle the binding IDs:\n", "\n", "```python\n", "@rt(\"/reorder_bindings\")\n", "def post(binding_id: list[int]):  # Changed from 'id' to 'binding_id' to match the hidden input name\n", "    # Update sort_order for each binding ID based on its position\n", "    for i, binding_id_ in enumerate(binding_id):\n", "        db.t.bindings.update(\n", "            {'sort_order': i * 100},  # Using multiples of 100 gives room for inserting items between others\n", "            binding_id_\n", "        )\n", "    return \"\"  # Empty response since we use hx-swap=\"none\"\n", "```\n", "\n", "Would you like me to explain:\n", "1. Why we multiply by 100 for the sort_order?\n", "2. How to test if this is working?\n", "3. How to add some visual feedback during dragging?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "I can now order. But the complete table gets removed. I have to refresh the screen.\n", "Two things. Only the table of the specific category should be changed. Not all. Also, after dragging I should still see the table."]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "Ah, we need to make two adjustments:\n", "\n", "1. Make the form ID unique for each category (so only that category's table updates)\n", "2. Return the updated table instead of an empty response\n", "\n", "Here's how to modify the code:\n", "\n", "```python\n", "# In your table creation:\n", "return Div(\n", "    P(cat_name, cls=(TextT.lg, TextT.bold, TextT.primary, TextT.center)), \n", "    Form(\n", "        Table(\n", "            Thead(table_heading),\n", "            Tbody(*rows,\n", "                  cls='sortable',\n", "                  id=f\"sortable-tbody-{action_category_id}\"),\n", "            cls=(TableT.hover, TableT.sm, TableT.striped)\n", "        ),\n", "        id=f\"form-category-{action_category_id}\",  # Add unique form ID\n", "        hx_post=f\"/reorder_bindings/{action_category_id}\",  # Add category to URL\n", "        hx_trigger=\"end from:tbody\",\n", "        hx_target=f\"#form-category-{action_category_id}\"  # Target the specific form\n", "    )\n", ")\n", "```\n", "\n", "Would you like me to show you how to modify the backend route to return the updated table?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "yes please"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "Here's how to modify the backend route to return the updated table:\n", "\n", "```python\n", "@rt(\"/reorder_bindings/{action_category_id}\")\n", "def post(binding_id: list[int], action_category_id: int, game_id: int = 5):  # Added game_id parameter\n", "    # Update sort_order for each binding ID\n", "    for i, binding_id_ in enumerate(binding_id):\n", "        db.t.bindings.update(\n", "            {'sort_order': i * 100},\n", "            binding_id_\n", "        )\n", "    \n", "    # Return the updated table for this category\n", "    return create_binding_table_category(db, game_id, action_category_id)\n", "```\n", "\n", "This will:\n", "1. Update the sort orders in the database\n", "2. Recreate the table with the new order\n", "3. Return just that category's table\n", "\n", "Would you like me to explain how to test this or add any visual feedback during dragging?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "It doesn't work as intended, I think that's because I didn't tell you enough.\n", "I have two functions to create the complete bindings table.\n", "\n", "```\n", "def create_bindings_table(db, game_id):\n", "    \"\"\"Create tables for all action categories and stack them vertically\"\"\"\n", "    # Get all unique category IDs\n", "    categories = db.t.categories.rows_where(\"id IN (SELECT DISTINCT category_id FROM actions)\")\n", "    category_ids = L(categories).attrgot('id')\n", "    \n", "    # Create a table for each category\n", "    tables = [create_binding_table_category(db, game_id, cat_id) for cat_id in category_ids]\n", "    \n", "    # Stack tables in a container div\n", "    return Div(*tables, id=\"all-bindings-tables\")\n", "```\n", "\n", "and\n", "\n", "```\n", "def create_binding_table_category(db, game_id, action_category_id):\n", "    print(\"Creating binding table for category\", action_category_id)\n", "    print(\"Game ID:\", game_id)\n", "\n", "    \"\"\"Helper function to create the bindings table for a given action category\"\"\"\n", "    # Get all categories and create lookup dicts\n", "    cat_actions = db.t.actions.rows_where(\"category_id = ?\", [action_category_id])\n", "    action_ids = L(cat_actions).attrgot(\"id\")\n", "\n", "    cat_name = L(db.t.categories.rows_where(\"id = ?\", [action_category_id])).attrgot('name')[0]\n", "\n", "    # Create table with category groups\n", "    table_heading = Tr(\n", "        Th(\"  \", style=\"width:10px;\"),\n", "        Th(\"Action\"),\n", "        Th(\"Key\"),\n", "        Th(\"Modifier\"),\n", "        Th(\"Game native description\"),\n", "        Th(\"Actions\")\n", "    )\n", "\n", "    text_style = TextT.justify\n", "\n", "    rows = []\n", "       \n", "    # Add bindings for this category\n", "    action_ids_str = ','.join(str(id) for id in action_ids) \n", "    # Convert action_ids to string. Converting to a tuple creates a trailing comma with only one element. Which gives invalid SQL syntax.\n", "    where_string = f\"game_id = {game_id} AND action_id IN ({action_ids_str}) ORDER BY sort_order\"\n", "\n", "    for b in db.t.bindings.rows_where(where_string):\n", "\n", "        rows.append(Tr(\n", "            Td(\"\u22ee\u22ee\", style=\"width: 10px;\"),\n", "            Td(next(db.t.actions.rows_where(\"id = ?\", [b['action_id']]))['name'],\n", "                cls=text_style),\n", "            Td(next(db.t.game_keys.rows_where(\"id = ?\", [b['key_id']]))['name'],\n", "                cls=text_style),\n", "            Td(next(db.t.modifiers.rows_where(\"id = ?\", [b['modifier_id']]))['name'],\n", "                cls=text_style),\n", "            Td(b['description'],\n", "                cls=text_style),\n", "            Td(b['sort_order'],\n", "                cls=text_style),\n", "            Td(Button(\"Edit\", \n", "                    hx_get=f\"/binding/{b['id']}/edit\",\n", "                    hx_target=\"#bindings-table\",\n", "                    cls=ButtonT.secondary),\n", "                Button(\"Delete\", \n", "                    hx_delete=f\"/binding/{b['id']}/delete\",\n", "                    hx_target=\"#bindings-table\",\n", "                    cls=ButtonT.danger),\n", "                cls=\"space-x-2\"),\n", "            Hidden(name=\"binding_id\", value=b['id'])\n", "            )\n", "        )\n", "```\n", "\n", "And this table is created on this page\n", "\n", "```\n", "@rt('/game/{game_id}')\n", "def get(game_id: int):\n", "\n", "    bindings = db.t.bindings.rows_where(\"game_id = ?\", [game_id])\n", "    game = db.t.games[game_id]\n", "    \n", "    return Div(nav(), Titled(\n", "        f\"Key Bindings - {game['name']}\",\n", "        Container(\n", "            DivRAligned(\n", "                Button(\"Back to Games\",\n", "                    hx_get=\"/\",\n", "                    hx_target=\"#game-page\",\n", "                    hx_swap=\"outer-html\",\n", "                    cls=(ButtonT.secondary, PaddingT.xl, 'mb-4')),\n", "                Button(\"Copy Default Bindings\", \n", "                    hx_post=f\"/game/{game_id}/copy_defaults\",\n", "                    hx_target=\"#bindings-table\",\n", "                    cls=(ButtonT.secondary, PaddingT.xl, 'mb-4')),\n", "                A(\"Add Binding\", \n", "                    href=f\"/game/{game_id}/add_binding\",\n", "                    cls=(ButtonT.secondary, PaddingT.xl, 'mb-4')),\n", "                A(\"Print layout\",\n", "                    href=f\"/game/{game_id}/print_layout\",\n", "                    cls=(ButtonT.secondary, PaddingT.xl, 'mb-4')),\n", "                cls=\"space-x-4\"\n", "            ),\n", "            Div(create_bindings_table(db, game_id), id=\"bindings-table\"),\n", "            )\n", "        ),\n", "        id=\"game-page\"\n", "    )\n", "```\n", "\n", "At the moment, when I run this code and I reorder. I get this response\n", "\n", "INFO:     127.0.0.1:38864 - \"POST /reorder_bindings/3 HTTP/1.1\" 400 Bad Request\n", "INFO:     127.0.0.1:38854 - \"POST /reorder_bindings/1 HTTP/1.1\" 400 Bad Request\n", "INFO:     127.0.0.1:38838 - \"POST /reorder_bindings/2 HTTP/1.1\" 400 Bad Request\n", "INFO:     127.0.0.1:38864 - \"POST /reorder_bindings/4 HTTP/1.1\" 400 Bad Request\n", "INFO:     127.0.0.1:38854 - \"POST /reorder_bindings/5 HTTP/1.1\" 400 Bad Request"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "Now I understand the full context. We need to modify both the form creation and the route handler. Here's how:\n", "\n", "First, modify the table creation in `create_binding_table_category`:\n", "\n", "```python\n", "return Div(\n", "    P(cat_name, cls=(TextT.lg, TextT.bold, TextT.primary, TextT.center)), \n", "    Form(\n", "        Table(\n", "            Thead(table_heading),\n", "            Tbody(*rows,\n", "                  cls='sortable',\n", "                  id=f\"sortable-tbody-{action_category_id}\"),\n", "            cls=(TableT.hover, TableT.sm, TableT.striped)\n", "        ),\n", "        id=f\"form-category-{action_category_id}\",\n", "        hx_post=f\"/game/{game_id}/reorder_bindings/{action_category_id}\",  # Include game_id in URL\n", "        hx_trigger=\"end from:tbody\",\n", "        hx_target=f\"#form-category-{action_category_id}\"\n", "    )\n", ")\n", "```\n", "\n", "Then create the route handler:\n", "\n", "```python\n", "@rt(\"/game/{game_id}/reorder_bindings/{action_category_id}\")\n", "def post(binding_id: list[int], game_id: int, action_category_id: int):\n", "    # Update sort_order for each binding ID\n", "    for i, binding_id_ in enumerate(binding_id):\n", "        db.t.bindings.update(\n", "            {'sort_order': i * 100},\n", "            binding_id_\n", "        )\n", "    \n", "    # Return just this category's table\n", "    return create_binding_table_category(db, game_id, action_category_id)\n", "```\n", "\n", "Would you like me to explain any part of these changes in more detail?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["I want to use the SQLite database the can be easily used with FastHTML apps by using the FastLite package. I want to learn how to create the database, make tables and connect those tables and fill the database with data."], "attachments": {}}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "If it have initialize a database `db` how can I see which file I loaded to do that?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "If you initialized your database using the `database()` function, you can check the connection details using:\n", "\n", "```python\n", "print(db.conn.filename)\n", "```\n", "\n", "This will show you the full path to the SQLite database file you're currently connected to. Would you like to try this?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "Yes please."]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "Here's how to create the route handler for reordering. First, we need to make sure each row has its binding ID available during reordering. Let's modify the row creation in your table:\n", "\n", "```python\n", "# In your create_binding_table_category function, modify the row creation:\n", "rows.append(Tr(\n", "    Td(\"\u22ee\u22ee\", style=\"width: 10px;\"),\n", "    Td(next(db.t.actions.rows_where(\"id = ?\", [b['action_id']]))['name'],\n", "        cls=text_style),\n", "    # ... other cells ...\n", "    data_id=b['id']  # Add this line to store the binding ID\n", "))\n", "```\n", "\n", "Then create the route handler:\n", "\n", "```python\n", "@rt(\"/game/{game_id}/reorder_bindings/{category_id}\")\n", "def post(game_id: int, category_id: int, request):\n", "    # Get the new order from the request\n", "    ids = request.headers.get('HX-Trigger-Name').split(',')\n", "    \n", "    # Update sort_order for each binding\n", "    for i, binding_id in enumerate(ids):\n", "        db.t.bindings.update(\n", "            {'sort_order': i}, \n", "            f\"id = ? AND game_id = ?\", \n", "            [binding_id, game_id]\n", "        )\n", "    \n", "    return \"\"  # Empty response since we used hx-swap=\"none\"\n", "```\n", "\n", "Would you like me to explain how this works, or would you like to try it first?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "Shouldn't {category_id} be {action_category_id}?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "Yes, you're right! We should keep the naming consistent. Let's modify the route handler to match the parameter name we used in the HTMX attributes:\n", "\n", "```python\n", "@rt(\"/game/{game_id}/reorder_bindings/{action_category_id}\")\n", "def post(game_id: int, action_category_id: int, request):\n", "    # Get the new order from the request\n", "    ids = request.headers.get('HX-Trigger-Name').split(',')\n", "    \n", "    # Update sort_order for each binding\n", "    for i, binding_id in enumerate(ids):\n", "        db.t.bindings.update(\n", "            {'sort_order': i}, \n", "            f\"id = ? AND game_id = ?\", \n", "            [binding_id, game_id]\n", "        )\n", "    \n", "    return \"\"  # Empty response since we used hx-swap=\"none\"\n", "```\n", "\n", "Would you like to try this updated version? Or do you have any questions about how it works?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "I get this error when I try to run this code:\n", "```\n", "ids = request.headers.get('HX-Trigger-Name').split(',')\n", "          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n", "AttributeError: 'NoneType' object has no attribute 'split'\n", "```\n", "\n", "So please explain how the post function works, because I don't understand. Especially how the 'request' parameter works and why we need the 'action_category_id' parameter which we don't use in the function."]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "Let me explain how the post function works:\n", "\n", "1. The `request` parameter contains the HTTP request data. When using Sortable.js with HTMX, we need to get the new order of items somehow. I made a mistake in assuming it would be in the 'HX-Trigger-Name' header.\n", "\n", "2. We need a different way to get the IDs of the reordered rows. Let's modify both parts:\n", "\n", "First, in the table creation, we need to tell Sortable.js to send the IDs:\n", "```python\n", "Tbody(*rows, \n", "      cls='sortable', \n", "      id=f'sortable-tbody-{action_category_id}',\n", "      hx_post=f\"/game/{game_id}/reorder_bindings/{action_category_id}\",\n", "      hx_trigger=\"end\",\n", "      hx_swap=\"none\",\n", "      **{'data-sortable-options': '{\"dataIdAttr\": \"data-id\"}'})  # Tell Sortable.js to use data-id\n", "```\n", "\n", "Then modify the route handler to get the IDs from the form data:\n", "```python\n", "@rt(\"/game/{game_id}/reorder_bindings/{action_category_id}\")\n", "def post(game_id: int, action_category_id: int, request):\n", "    # Get form data which will contain the new order\n", "    form_data = await request.form()\n", "    ids = form_data.getlist('id[]')  # Sortable.js sends the ids as id[]\n", "    \n", "    # Update sort_order for each binding\n", "    for i, binding_id in enumerate(ids):\n", "        db.t.bindings.update(\n", "            {'sort_order': i}, \n", "            f\"id = ? AND game_id = ? AND action_id IN (SELECT id FROM actions WHERE category_id = ?)\", \n", "            [binding_id, game_id, action_category_id]\n", "        )\n", "    \n", "    return \"\"\n", "```\n", "\n", "Now I've also added the `action_category_id` to the WHERE clause to ensure we only update sort orders within the correct category.\n", "\n", "Would you like me to explain any part of this in more detail?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "I think you are making this far to complicated. Using fasthtml and htmx this should be simpler. Please take a good look at the note: \"Score: 1.00 -- Detailed walk-thru of a complete CRUD app in FastHTML showing idiomatic use of FastHTML and HTMX patterns\" and think again. After that explain to me how I can get the sorting to work."]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "You're absolutely right - I apologize for overcomplicating it. Looking at the FastHTML CRUD example, we can make this much simpler.\n", "\n", "In FastHTML with HTMX, we can handle sorting like this:\n", "\n", "1. First, modify the table's tbody to be sortable and post the results:\n", "```python\n", "Tbody(*rows, \n", "      cls='sortable', \n", "      id=f'sortable-tbody-{action_category_id}',\n", "      hx_post=\"/reorder\",\n", "      hx_trigger=\"end\")\n", "```\n", "\n", "2. Then create a simple route handler:\n", "```python\n", "@rt(\"/reorder\")\n", "def post(id: list[int]):\n", "    # FastHTML automatically gets the list of ids in order\n", "    for i, id_ in enumerate(id):\n", "        db.t.bindings.update({'sort_order': i}, id_)\n", "    return \"\"\n", "```\n", "\n", "This is much cleaner - FastHTML handles all the complexity for us. Would you like me to explain how this works?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "This already looks great. But I would like the 'category' names be centered on the table. Currently they are on the left side of the second column.\n", "Also I'd like to give them an accent color on the complete row. The collor should be dependent on the chosen color scheme of the webapp."]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "We can modify the category header rows to span all columns and apply styling. Let's break this into two steps:\n", "\n", "1. First, let's center the category names by making them span all columns. Change the category header row to:\n", "\n", "```python\n", "rows.append(Tr(\n", "    Th(P(category, cls=(TextT.lg, TextT.bold, TextT.primary, TextT.center)), \n", "       colspan=\"6\")  # Span all 6 columns\n", "))\n", "```\n", "\n", "Would you like to try this first and then we can add the accent color styling?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "I tried. Please add the coloring."]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "Let's add accent coloring to the category header row. We can use the built-in theme color classes from your UI framework. Here's how to modify the category header row:\n", "\n", "```python\n", "rows.append(Tr(\n", "    Th(P(category, cls=(TextT.lg, TextT.bold, TextT.center)), \n", "       colspan=\"6\",\n", "       cls=\"bg-primary-100 dark:bg-primary-900\"  # Light accent in light mode, dark accent in dark mode\n", "))\n", "```\n", "\n", "This will give a subtle accent color that adapts to the theme. Would you like to try this? We can adjust the color intensity (e.g., primary-200, primary-800) if you want it stronger or lighter."]}, {"cell_type": "code", "metadata": {}, "source": ["def create_bindings_table(bindings, game_id):\n", "    \"\"\"Helper function to create the bindings table with category grouping\"\"\"\n", "    # Get all categories and create lookup dicts\n", "    categories = {c['id']: c['name'] for c in db.t.categories()}\n", "    actions = {a['id']: (a['name'], a['category_id']) for a in db.t.actions()}\n", "\n", "    game = db.t.games[game_id]\n", "    \n", "    # Group bindings by category\n", "    grouped_bindings = {}\n", "    for b in bindings:\n", "        action_name, category_id = actions[b['action_id']]\n", "        category = categories[category_id]\n", "        if category not in grouped_bindings:\n", "            grouped_bindings[category] = []\n", "        grouped_bindings[category].append(b)\n", "    \n", "    # Create table with category groups\n", "    table_heading = Tr(\n", "        #Th(\"\u22ee\u22ee\", style=\"width:10px;\"),\n", "        Th(\"Action\"),\n", "        Th(\"Key\"),\n", "        Th(\"Modifier\"),\n", "        Th(\"Game native description\"),\n", "        Th(\"Actions\")\n", "    )\n", "\n", "    text_style = TextT.justify\n", "\n", "    rows = []\n", "    \n", "    for category, cat_bindings in grouped_bindings.items():\n", "        # Add category header\n", "        rows.append(Tr(\n", "            Th(P(category, cls=(TextT.lg, TextT.bold, TextT.primary, TextT.center)),\n", "            colspan=\"6\",\n", "            cls=\"bg-primary-100 dark:bg-primary-900\")  # Light accent in light mode, dark accent in dark mode\n", "        ))\n", "\n", "        # Add bindings for this category\n", "        for b in cat_bindings:\n", "            b_id = b['id']\n", "\n", "            rows.append(Tr(\n", "                Td(\"\u22ee\u22ee\", cls=\"drag-handle\", draggable=\"true\", style=\"width: 10px;\"),  # Handle cell\n", "                Td(actions[b['action_id']][0]),\n", "                Td(next(db.t.game_keys.rows_where(\"id = ?\", [b['key_id']]))['name'],\n", "                   cls=text_style),\n", "                Td(next(db.t.modifiers.rows_where(\"id = ?\", [b['modifier_id']]))['name'],\n", "                   cls=text_style),\n", "                Td(b['description'],\n", "                   cls=text_style),\n", "                Td(Button(\"Edit\", \n", "                        hx_get=f\"/binding/{b_id}/edit\",\n", "                        hx_target=\"#bindings-table\",\n", "                        cls=ButtonT.secondary),\n", "                   Button(\"Delete\", \n", "                        hx_delete=f\"/binding/{b['id']}/delete\",\n", "                        hx_target=\"#bindings-table\",\n", "                        cls=ButtonT.destructive),\n", "                    cls=\"space-x-2\")\n", "                )\n", "            )\n", "        \n", "    \n", "    return Table(Thead(table_heading), Tbody(*rows, sortable=True), cls=(TableT.responsive, TableT.sm, TableT.divider))"], "outputs": [], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["show(Div(cls='mt-4')(create_bindings_table(db.t.bindings.rows_where(\"game_id = 1\"), 1)))"], "outputs": [{"data": {"text/plain": ["<IPython.core.display.HTML object>"], "text/html": ["<div class=\"mt-4\">\n", "  <table class=\"uk-table uk-table-responsive uk-table-small uk-table-divider\">\n", "    <thead>\n", "      <tr>\n", "        <th>Action</th>\n", "        <th>Key</th>\n", "        <th>Modifier</th>\n", "        <th>Game native description</th>\n", "        <th>Actions</th>\n", "      </tr>\n", "    </thead>\n", "    <tbody uk-sortable>\n", "      <tr>\n", "        <th colspan=\"6\" class=\"bg-primary-100 dark:bg-primary-900\">\n", "          <p class=\"text-lg font-bold text-primary text-center\">movement</p>\n", "        </th>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Forward</td>\n", "        <td class=\"text-justify\">w</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/1/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/1/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Backward</td>\n", "        <td class=\"text-justify\">s</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/2/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/2/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Left</td>\n", "        <td class=\"text-justify\">a</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/3/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/3/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Right</td>\n", "        <td class=\"text-justify\">d</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/4/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/4/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Jump/climb</td>\n", "        <td class=\"text-justify\">left_control</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/5/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/5/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Crouch</td>\n", "        <td class=\"text-justify\">c</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/6/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/6/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Prone</td>\n", "        <td class=\"text-justify\">space</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/7/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/7/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Sprint</td>\n", "        <td class=\"text-justify\">left_shift</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/8/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/8/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Walk</td>\n", "        <td class=\"text-justify\">left_alt</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/9/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/9/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Lean left</td>\n", "        <td class=\"text-justify\">mouse_side_front</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/10/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/10/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Lean right</td>\n", "        <td class=\"text-justify\">mouse_side_back</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/11/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/11/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Forward</td>\n", "        <td class=\"text-justify\">w</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/83/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/83/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Backward</td>\n", "        <td class=\"text-justify\">s</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/84/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/84/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Left</td>\n", "        <td class=\"text-justify\">a</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/85/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/85/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Right</td>\n", "        <td class=\"text-justify\">d</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/86/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/86/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Jump/climb</td>\n", "        <td class=\"text-justify\">left_control</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/87/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/87/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Crouch</td>\n", "        <td class=\"text-justify\">c</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/88/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/88/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Prone</td>\n", "        <td class=\"text-justify\">space</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/89/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/89/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Sprint</td>\n", "        <td class=\"text-justify\">left_shift</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/90/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/90/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Walk</td>\n", "        <td class=\"text-justify\">left_alt</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/91/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/91/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Lean left</td>\n", "        <td class=\"text-justify\">mouse_side_front</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/92/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/92/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Lean right</td>\n", "        <td class=\"text-justify\">mouse_side_back</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/93/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/93/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Forward</td>\n", "        <td class=\"text-justify\">w</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/110/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/110/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Backward</td>\n", "        <td class=\"text-justify\">s</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/111/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/111/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Left</td>\n", "        <td class=\"text-justify\">a</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/112/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/112/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Right</td>\n", "        <td class=\"text-justify\">d</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/113/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/113/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Jump/climb</td>\n", "        <td class=\"text-justify\">left_control</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/114/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/114/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Crouch</td>\n", "        <td class=\"text-justify\">c</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/115/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/115/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Prone</td>\n", "        <td class=\"text-justify\">space</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/116/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/116/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Sprint</td>\n", "        <td class=\"text-justify\">left_shift</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/117/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/117/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Walk</td>\n", "        <td class=\"text-justify\">left_alt</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/118/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/118/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Lean left</td>\n", "        <td class=\"text-justify\">mouse_side_front</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/119/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/119/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Lean right</td>\n", "        <td class=\"text-justify\">mouse_side_back</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/120/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/120/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Forward</td>\n", "        <td class=\"text-justify\">w</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/137/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/137/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Backward</td>\n", "        <td class=\"text-justify\">s</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/138/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/138/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Left</td>\n", "        <td class=\"text-justify\">a</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/139/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/139/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Right</td>\n", "        <td class=\"text-justify\">d</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/140/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/140/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Jump/climb</td>\n", "        <td class=\"text-justify\">left_control</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/141/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/141/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Crouch</td>\n", "        <td class=\"text-justify\">c</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/142/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/142/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Prone</td>\n", "        <td class=\"text-justify\">space</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/143/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/143/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Sprint</td>\n", "        <td class=\"text-justify\">left_shift</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/144/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/144/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Walk</td>\n", "        <td class=\"text-justify\">left_alt</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/145/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/145/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Lean left</td>\n", "        <td class=\"text-justify\">mouse_side_front</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/146/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/146/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Lean right</td>\n", "        <td class=\"text-justify\">mouse_side_back</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/147/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/147/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Forward</td>\n", "        <td class=\"text-justify\">w</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/164/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/164/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Backward</td>\n", "        <td class=\"text-justify\">s</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/165/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/165/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Left</td>\n", "        <td class=\"text-justify\">a</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/166/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/166/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Right</td>\n", "        <td class=\"text-justify\">d</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/167/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/167/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Jump/climb</td>\n", "        <td class=\"text-justify\">left_control</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/168/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/168/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Crouch</td>\n", "        <td class=\"text-justify\">c</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/169/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/169/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Prone</td>\n", "        <td class=\"text-justify\">space</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/170/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/170/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Sprint</td>\n", "        <td class=\"text-justify\">left_shift</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/171/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/171/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Walk</td>\n", "        <td class=\"text-justify\">left_alt</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/172/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/172/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Lean left</td>\n", "        <td class=\"text-justify\">mouse_side_front</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/173/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/173/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Lean right</td>\n", "        <td class=\"text-justify\">mouse_side_back</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/174/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/174/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Forward</td>\n", "        <td class=\"text-justify\">w</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/191/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/191/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Backward</td>\n", "        <td class=\"text-justify\">s</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/192/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/192/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Left</td>\n", "        <td class=\"text-justify\">a</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/193/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/193/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Right</td>\n", "        <td class=\"text-justify\">d</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/194/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/194/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Jump/climb</td>\n", "        <td class=\"text-justify\">left_control</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/195/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/195/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Crouch</td>\n", "        <td class=\"text-justify\">c</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/196/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/196/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Prone</td>\n", "        <td class=\"text-justify\">space</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/197/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/197/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Sprint</td>\n", "        <td class=\"text-justify\">left_shift</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/198/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/198/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Walk</td>\n", "        <td class=\"text-justify\">left_alt</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/199/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/199/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Lean left</td>\n", "        <td class=\"text-justify\">mouse_side_front</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/200/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/200/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Lean right</td>\n", "        <td class=\"text-justify\">mouse_side_back</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/201/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/201/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Forward</td>\n", "        <td class=\"text-justify\">w</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/218/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/218/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Backward</td>\n", "        <td class=\"text-justify\">s</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/219/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/219/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Left</td>\n", "        <td class=\"text-justify\">a</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/220/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/220/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Right</td>\n", "        <td class=\"text-justify\">d</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/221/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/221/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Jump/climb</td>\n", "        <td class=\"text-justify\">left_control</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/222/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/222/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Crouch</td>\n", "        <td class=\"text-justify\">c</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/223/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/223/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Prone</td>\n", "        <td class=\"text-justify\">space</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/224/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/224/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Sprint</td>\n", "        <td class=\"text-justify\">left_shift</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/225/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/225/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Walk</td>\n", "        <td class=\"text-justify\">left_alt</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/226/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/226/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Lean left</td>\n", "        <td class=\"text-justify\">mouse_side_front</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/227/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/227/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Lean right</td>\n", "        <td class=\"text-justify\">mouse_side_back</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/228/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/228/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Forward</td>\n", "        <td class=\"text-justify\">w</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/245/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/245/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Backward</td>\n", "        <td class=\"text-justify\">s</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/246/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/246/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Left</td>\n", "        <td class=\"text-justify\">a</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/247/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/247/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Right</td>\n", "        <td class=\"text-justify\">d</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/248/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/248/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Jump/climb</td>\n", "        <td class=\"text-justify\">left_control</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/249/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/249/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Crouch</td>\n", "        <td class=\"text-justify\">c</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/250/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/250/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Prone</td>\n", "        <td class=\"text-justify\">space</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/251/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/251/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Sprint</td>\n", "        <td class=\"text-justify\">left_shift</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/252/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/252/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Walk</td>\n", "        <td class=\"text-justify\">left_alt</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/253/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/253/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Lean left</td>\n", "        <td class=\"text-justify\">mouse_side_front</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/254/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/254/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Lean right</td>\n", "        <td class=\"text-justify\">mouse_side_back</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/255/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/255/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Forward</td>\n", "        <td class=\"text-justify\">w</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/272/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/272/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Backward</td>\n", "        <td class=\"text-justify\">s</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/273/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/273/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Left</td>\n", "        <td class=\"text-justify\">a</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/274/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/274/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Right</td>\n", "        <td class=\"text-justify\">d</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/275/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/275/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Jump/climb</td>\n", "        <td class=\"text-justify\">left_control</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/276/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/276/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Crouch</td>\n", "        <td class=\"text-justify\">c</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/277/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/277/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Prone</td>\n", "        <td class=\"text-justify\">space</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/278/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/278/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Sprint</td>\n", "        <td class=\"text-justify\">left_shift</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/279/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/279/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Walk</td>\n", "        <td class=\"text-justify\">left_alt</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/280/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/280/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Lean left</td>\n", "        <td class=\"text-justify\">mouse_side_front</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/281/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/281/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Lean right</td>\n", "        <td class=\"text-justify\">mouse_side_back</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/282/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/282/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Forward</td>\n", "        <td class=\"text-justify\">w</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/299/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/299/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Backward</td>\n", "        <td class=\"text-justify\">s</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/300/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/300/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Left</td>\n", "        <td class=\"text-justify\">a</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/301/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/301/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Right</td>\n", "        <td class=\"text-justify\">d</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/302/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/302/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Jump/climb</td>\n", "        <td class=\"text-justify\">left_control</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/303/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/303/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Crouch</td>\n", "        <td class=\"text-justify\">c</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/304/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/304/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Prone</td>\n", "        <td class=\"text-justify\">space</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/305/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/305/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Sprint</td>\n", "        <td class=\"text-justify\">left_shift</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/306/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/306/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Walk</td>\n", "        <td class=\"text-justify\">left_alt</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/307/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/307/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Lean left</td>\n", "        <td class=\"text-justify\">mouse_side_front</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/308/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/308/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Lean right</td>\n", "        <td class=\"text-justify\">mouse_side_back</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/309/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/309/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Forward</td>\n", "        <td class=\"text-justify\">w</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/353/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/353/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Backward</td>\n", "        <td class=\"text-justify\">s</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/354/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/354/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Left</td>\n", "        <td class=\"text-justify\">a</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/355/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/355/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Right</td>\n", "        <td class=\"text-justify\">d</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/356/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/356/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Jump/climb</td>\n", "        <td class=\"text-justify\">left_control</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/357/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/357/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Crouch</td>\n", "        <td class=\"text-justify\">c</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/358/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/358/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Prone</td>\n", "        <td class=\"text-justify\">space</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/359/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/359/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Sprint</td>\n", "        <td class=\"text-justify\">left_shift</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/360/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/360/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Walk</td>\n", "        <td class=\"text-justify\">left_alt</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/361/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/361/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Lean left</td>\n", "        <td class=\"text-justify\">mouse_side_front</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/362/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/362/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Lean right</td>\n", "        <td class=\"text-justify\">mouse_side_back</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/363/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/363/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Forward</td>\n", "        <td class=\"text-justify\">w</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/380/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/380/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Backward</td>\n", "        <td class=\"text-justify\">s</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/381/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/381/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Left</td>\n", "        <td class=\"text-justify\">a</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/382/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/382/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Right</td>\n", "        <td class=\"text-justify\">d</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/383/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/383/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Jump/climb</td>\n", "        <td class=\"text-justify\">left_control</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/384/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/384/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Crouch</td>\n", "        <td class=\"text-justify\">c</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/385/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/385/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Prone</td>\n", "        <td class=\"text-justify\">space</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/386/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/386/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Sprint</td>\n", "        <td class=\"text-justify\">left_shift</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/387/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/387/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Walk</td>\n", "        <td class=\"text-justify\">left_alt</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/388/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/388/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Lean left</td>\n", "        <td class=\"text-justify\">mouse_side_front</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/389/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/389/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Lean right</td>\n", "        <td class=\"text-justify\">mouse_side_back</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/390/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/390/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Forward</td>\n", "        <td class=\"text-justify\">w</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/407/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/407/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Backward</td>\n", "        <td class=\"text-justify\">s</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/408/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/408/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Left</td>\n", "        <td class=\"text-justify\">a</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/409/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/409/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Right</td>\n", "        <td class=\"text-justify\">d</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/410/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/410/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Jump/climb</td>\n", "        <td class=\"text-justify\">left_control</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/411/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/411/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Crouch</td>\n", "        <td class=\"text-justify\">c</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/412/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/412/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Prone</td>\n", "        <td class=\"text-justify\">space</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/413/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/413/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Sprint</td>\n", "        <td class=\"text-justify\">left_shift</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/414/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/414/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Walk</td>\n", "        <td class=\"text-justify\">left_alt</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/415/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/415/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Lean left</td>\n", "        <td class=\"text-justify\">mouse_side_front</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/416/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/416/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Lean right</td>\n", "        <td class=\"text-justify\">mouse_side_back</td>\n", "        <td class=\"text-justify\">hold</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/417/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/417/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <th colspan=\"6\" class=\"bg-primary-100 dark:bg-primary-900\">\n", "          <p class=\"text-lg font-bold text-primary text-center\">combat</p>\n", "        </th>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Fire primary</td>\n", "        <td class=\"text-justify\">mouse_left</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/12/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/12/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Aim</td>\n", "        <td class=\"text-justify\">mouse_right</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/13/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/13/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Reload</td>\n", "        <td class=\"text-justify\">r</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/14/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/14/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Switch weapon</td>\n", "        <td class=\"text-justify\">mouse_middle</td>\n", "        <td class=\"text-justify\">scroll</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/15/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/15/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Melee</td>\n", "        <td class=\"text-justify\">h</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/16/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/16/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Grenade</td>\n", "        <td class=\"text-justify\">g</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/17/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/17/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Special</td>\n", "        <td class=\"text-justify\">q</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/18/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/18/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Stim</td>\n", "        <td class=\"text-justify\">f</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/19/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/19/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Fire primary</td>\n", "        <td class=\"text-justify\">mouse_left</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/94/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/94/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Aim</td>\n", "        <td class=\"text-justify\">mouse_right</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/95/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/95/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Reload</td>\n", "        <td class=\"text-justify\">r</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/96/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/96/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Switch weapon</td>\n", "        <td class=\"text-justify\">mouse_middle</td>\n", "        <td class=\"text-justify\">scroll</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/97/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/97/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Melee</td>\n", "        <td class=\"text-justify\">h</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/98/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/98/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Grenade</td>\n", "        <td class=\"text-justify\">g</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/99/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/99/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Special</td>\n", "        <td class=\"text-justify\">q</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/100/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/100/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Stim</td>\n", "        <td class=\"text-justify\">f</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/101/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/101/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Fire primary</td>\n", "        <td class=\"text-justify\">mouse_left</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/121/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/121/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Aim</td>\n", "        <td class=\"text-justify\">mouse_right</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/122/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/122/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Reload</td>\n", "        <td class=\"text-justify\">r</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/123/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/123/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Switch weapon</td>\n", "        <td class=\"text-justify\">mouse_middle</td>\n", "        <td class=\"text-justify\">scroll</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/124/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/124/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Melee</td>\n", "        <td class=\"text-justify\">h</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/125/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/125/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Grenade</td>\n", "        <td class=\"text-justify\">g</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/126/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/126/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Special</td>\n", "        <td class=\"text-justify\">q</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/127/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/127/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Stim</td>\n", "        <td class=\"text-justify\">f</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/128/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/128/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Fire primary</td>\n", "        <td class=\"text-justify\">mouse_left</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/148/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/148/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Aim</td>\n", "        <td class=\"text-justify\">mouse_right</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/149/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/149/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Reload</td>\n", "        <td class=\"text-justify\">r</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/150/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/150/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Switch weapon</td>\n", "        <td class=\"text-justify\">mouse_middle</td>\n", "        <td class=\"text-justify\">scroll</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/151/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/151/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Melee</td>\n", "        <td class=\"text-justify\">h</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/152/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/152/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Grenade</td>\n", "        <td class=\"text-justify\">g</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/153/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/153/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Special</td>\n", "        <td class=\"text-justify\">q</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/154/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/154/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Stim</td>\n", "        <td class=\"text-justify\">f</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/155/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/155/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Fire primary</td>\n", "        <td class=\"text-justify\">mouse_left</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/175/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/175/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Aim</td>\n", "        <td class=\"text-justify\">mouse_right</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/176/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/176/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Reload</td>\n", "        <td class=\"text-justify\">r</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/177/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/177/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Switch weapon</td>\n", "        <td class=\"text-justify\">mouse_middle</td>\n", "        <td class=\"text-justify\">scroll</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/178/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/178/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Melee</td>\n", "        <td class=\"text-justify\">h</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/179/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/179/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Grenade</td>\n", "        <td class=\"text-justify\">g</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/180/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/180/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Special</td>\n", "        <td class=\"text-justify\">q</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/181/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/181/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Stim</td>\n", "        <td class=\"text-justify\">f</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/182/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/182/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Fire primary</td>\n", "        <td class=\"text-justify\">mouse_left</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/202/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/202/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Aim</td>\n", "        <td class=\"text-justify\">mouse_right</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/203/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/203/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Reload</td>\n", "        <td class=\"text-justify\">r</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/204/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/204/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Switch weapon</td>\n", "        <td class=\"text-justify\">mouse_middle</td>\n", "        <td class=\"text-justify\">scroll</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/205/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/205/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Melee</td>\n", "        <td class=\"text-justify\">h</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/206/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/206/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Grenade</td>\n", "        <td class=\"text-justify\">g</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/207/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/207/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Special</td>\n", "        <td class=\"text-justify\">q</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/208/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/208/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Stim</td>\n", "        <td class=\"text-justify\">f</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/209/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/209/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Fire primary</td>\n", "        <td class=\"text-justify\">mouse_left</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/229/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/229/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Aim</td>\n", "        <td class=\"text-justify\">mouse_right</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/230/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/230/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Reload</td>\n", "        <td class=\"text-justify\">r</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/231/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/231/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Switch weapon</td>\n", "        <td class=\"text-justify\">mouse_middle</td>\n", "        <td class=\"text-justify\">scroll</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/232/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/232/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Melee</td>\n", "        <td class=\"text-justify\">h</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/233/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/233/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Grenade</td>\n", "        <td class=\"text-justify\">g</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/234/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/234/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Special</td>\n", "        <td class=\"text-justify\">q</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/235/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/235/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Stim</td>\n", "        <td class=\"text-justify\">f</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/236/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/236/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Fire primary</td>\n", "        <td class=\"text-justify\">mouse_left</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/256/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/256/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Aim</td>\n", "        <td class=\"text-justify\">mouse_right</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/257/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/257/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Reload</td>\n", "        <td class=\"text-justify\">r</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/258/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/258/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Switch weapon</td>\n", "        <td class=\"text-justify\">mouse_middle</td>\n", "        <td class=\"text-justify\">scroll</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/259/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/259/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Melee</td>\n", "        <td class=\"text-justify\">h</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/260/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/260/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Grenade</td>\n", "        <td class=\"text-justify\">g</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/261/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/261/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Special</td>\n", "        <td class=\"text-justify\">q</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/262/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/262/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Stim</td>\n", "        <td class=\"text-justify\">f</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/263/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/263/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Fire primary</td>\n", "        <td class=\"text-justify\">mouse_left</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/283/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/283/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Aim</td>\n", "        <td class=\"text-justify\">mouse_right</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/284/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/284/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Reload</td>\n", "        <td class=\"text-justify\">r</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/285/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/285/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Switch weapon</td>\n", "        <td class=\"text-justify\">mouse_middle</td>\n", "        <td class=\"text-justify\">scroll</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/286/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/286/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Melee</td>\n", "        <td class=\"text-justify\">h</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/287/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/287/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Grenade</td>\n", "        <td class=\"text-justify\">g</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/288/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/288/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Special</td>\n", "        <td class=\"text-justify\">q</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/289/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/289/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Stim</td>\n", "        <td class=\"text-justify\">f</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/290/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/290/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Fire primary</td>\n", "        <td class=\"text-justify\">mouse_left</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/310/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/310/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Aim</td>\n", "        <td class=\"text-justify\">mouse_right</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/311/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/311/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Reload</td>\n", "        <td class=\"text-justify\">r</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/312/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/312/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Switch weapon</td>\n", "        <td class=\"text-justify\">mouse_middle</td>\n", "        <td class=\"text-justify\">scroll</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/313/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/313/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Melee</td>\n", "        <td class=\"text-justify\">h</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/314/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/314/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Grenade</td>\n", "        <td class=\"text-justify\">g</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/315/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/315/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Special</td>\n", "        <td class=\"text-justify\">q</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/316/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/316/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Stim</td>\n", "        <td class=\"text-justify\">f</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/317/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/317/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Fire primary</td>\n", "        <td class=\"text-justify\">mouse_left</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/364/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/364/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Aim</td>\n", "        <td class=\"text-justify\">mouse_right</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/365/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/365/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Reload</td>\n", "        <td class=\"text-justify\">r</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/366/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/366/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Switch weapon</td>\n", "        <td class=\"text-justify\">mouse_middle</td>\n", "        <td class=\"text-justify\">scroll</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/367/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/367/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Melee</td>\n", "        <td class=\"text-justify\">h</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/368/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/368/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Grenade</td>\n", "        <td class=\"text-justify\">g</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/369/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/369/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Special</td>\n", "        <td class=\"text-justify\">q</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/370/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/370/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Stim</td>\n", "        <td class=\"text-justify\">f</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/371/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/371/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Fire primary</td>\n", "        <td class=\"text-justify\">mouse_left</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/391/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/391/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Aim</td>\n", "        <td class=\"text-justify\">mouse_right</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/392/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/392/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Reload</td>\n", "        <td class=\"text-justify\">r</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/393/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/393/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Switch weapon</td>\n", "        <td class=\"text-justify\">mouse_middle</td>\n", "        <td class=\"text-justify\">scroll</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/394/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/394/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Melee</td>\n", "        <td class=\"text-justify\">h</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/395/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/395/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Grenade</td>\n", "        <td class=\"text-justify\">g</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/396/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/396/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Special</td>\n", "        <td class=\"text-justify\">q</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/397/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/397/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Stim</td>\n", "        <td class=\"text-justify\">f</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/398/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/398/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Fire primary</td>\n", "        <td class=\"text-justify\">mouse_left</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/418/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/418/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Aim</td>\n", "        <td class=\"text-justify\">mouse_right</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/419/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/419/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Reload</td>\n", "        <td class=\"text-justify\">r</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/420/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/420/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Switch weapon</td>\n", "        <td class=\"text-justify\">mouse_middle</td>\n", "        <td class=\"text-justify\">scroll</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/421/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/421/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Melee</td>\n", "        <td class=\"text-justify\">h</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/422/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/422/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Grenade</td>\n", "        <td class=\"text-justify\">g</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/423/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/423/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Special</td>\n", "        <td class=\"text-justify\">q</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/424/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/424/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Stim</td>\n", "        <td class=\"text-justify\">f</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/425/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/425/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <th colspan=\"6\" class=\"bg-primary-100 dark:bg-primary-900\">\n", "          <p class=\"text-lg font-bold text-primary text-center\">interaction</p>\n", "        </th>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Use</td>\n", "        <td class=\"text-justify\">e</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/20/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/20/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Use</td>\n", "        <td class=\"text-justify\">e</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/102/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/102/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Use</td>\n", "        <td class=\"text-justify\">e</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/129/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/129/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Use</td>\n", "        <td class=\"text-justify\">e</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/156/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/156/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Use</td>\n", "        <td class=\"text-justify\">e</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/183/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/183/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Use</td>\n", "        <td class=\"text-justify\">e</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/210/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/210/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Use</td>\n", "        <td class=\"text-justify\">e</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/237/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/237/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Use</td>\n", "        <td class=\"text-justify\">e</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/264/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/264/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Use</td>\n", "        <td class=\"text-justify\">e</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/291/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/291/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Use</td>\n", "        <td class=\"text-justify\">e</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/318/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/318/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Use</td>\n", "        <td class=\"text-justify\">e</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/372/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/372/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Use</td>\n", "        <td class=\"text-justify\">e</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/399/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/399/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Use</td>\n", "        <td class=\"text-justify\">e</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/426/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/426/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <th colspan=\"6\" class=\"bg-primary-100 dark:bg-primary-900\">\n", "          <p class=\"text-lg font-bold text-primary text-center\">communication</p>\n", "        </th>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Voice</td>\n", "        <td class=\"text-justify\">t</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/21/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/21/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Text</td>\n", "        <td class=\"text-justify\">enter</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/22/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/22/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Ping</td>\n", "        <td class=\"text-justify\">z</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/23/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/23/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Emote</td>\n", "        <td class=\"text-justify\">b</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/24/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/24/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Voice</td>\n", "        <td class=\"text-justify\">t</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/103/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/103/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Text</td>\n", "        <td class=\"text-justify\">enter</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/104/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/104/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Ping</td>\n", "        <td class=\"text-justify\">z</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/105/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/105/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Emote</td>\n", "        <td class=\"text-justify\">b</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/106/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/106/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Voice</td>\n", "        <td class=\"text-justify\">t</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/130/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/130/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Text</td>\n", "        <td class=\"text-justify\">enter</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/131/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/131/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Ping</td>\n", "        <td class=\"text-justify\">z</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/132/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/132/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Emote</td>\n", "        <td class=\"text-justify\">b</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/133/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/133/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Voice</td>\n", "        <td class=\"text-justify\">t</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/157/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/157/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Text</td>\n", "        <td class=\"text-justify\">enter</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/158/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/158/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Ping</td>\n", "        <td class=\"text-justify\">z</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/159/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/159/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Emote</td>\n", "        <td class=\"text-justify\">b</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/160/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/160/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Voice</td>\n", "        <td class=\"text-justify\">t</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/184/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/184/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Text</td>\n", "        <td class=\"text-justify\">enter</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/185/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/185/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Ping</td>\n", "        <td class=\"text-justify\">z</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/186/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/186/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Emote</td>\n", "        <td class=\"text-justify\">b</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/187/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/187/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Voice</td>\n", "        <td class=\"text-justify\">t</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/211/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/211/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Text</td>\n", "        <td class=\"text-justify\">enter</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/212/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/212/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Ping</td>\n", "        <td class=\"text-justify\">z</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/213/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/213/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Emote</td>\n", "        <td class=\"text-justify\">b</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/214/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/214/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Voice</td>\n", "        <td class=\"text-justify\">t</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/238/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/238/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Text</td>\n", "        <td class=\"text-justify\">enter</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/239/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/239/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Ping</td>\n", "        <td class=\"text-justify\">z</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/240/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/240/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Emote</td>\n", "        <td class=\"text-justify\">b</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/241/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/241/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Voice</td>\n", "        <td class=\"text-justify\">t</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/265/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/265/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Text</td>\n", "        <td class=\"text-justify\">enter</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/266/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/266/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Ping</td>\n", "        <td class=\"text-justify\">z</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/267/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/267/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Emote</td>\n", "        <td class=\"text-justify\">b</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/268/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/268/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Voice</td>\n", "        <td class=\"text-justify\">t</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/292/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/292/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Text</td>\n", "        <td class=\"text-justify\">enter</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/293/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/293/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Ping</td>\n", "        <td class=\"text-justify\">z</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/294/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/294/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Emote</td>\n", "        <td class=\"text-justify\">b</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/295/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/295/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Voice</td>\n", "        <td class=\"text-justify\">t</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/319/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/319/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Text</td>\n", "        <td class=\"text-justify\">enter</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/320/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/320/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Ping</td>\n", "        <td class=\"text-justify\">z</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/321/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/321/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Emote</td>\n", "        <td class=\"text-justify\">b</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/322/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/322/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Voice</td>\n", "        <td class=\"text-justify\">t</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/373/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/373/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Text</td>\n", "        <td class=\"text-justify\">enter</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/374/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/374/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Ping</td>\n", "        <td class=\"text-justify\">z</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/375/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/375/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Emote</td>\n", "        <td class=\"text-justify\">b</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/376/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/376/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Voice</td>\n", "        <td class=\"text-justify\">t</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/400/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/400/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Text</td>\n", "        <td class=\"text-justify\">enter</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/401/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/401/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Ping</td>\n", "        <td class=\"text-justify\">z</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/402/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/402/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Emote</td>\n", "        <td class=\"text-justify\">b</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/403/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/403/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Voice</td>\n", "        <td class=\"text-justify\">t</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/427/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/427/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Text</td>\n", "        <td class=\"text-justify\">enter</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/428/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/428/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Ping</td>\n", "        <td class=\"text-justify\">z</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/429/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/429/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Emote</td>\n", "        <td class=\"text-justify\">b</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/430/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/430/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <th colspan=\"6\" class=\"bg-primary-100 dark:bg-primary-900\">\n", "          <p class=\"text-lg font-bold text-primary text-center\">menu</p>\n", "        </th>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Menu</td>\n", "        <td class=\"text-justify\">esc</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/25/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/25/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Map</td>\n", "        <td class=\"text-justify\">m</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/26/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/26/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Inventory</td>\n", "        <td class=\"text-justify\">tab</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/27/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/27/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Menu</td>\n", "        <td class=\"text-justify\">esc</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/107/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/107/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Map</td>\n", "        <td class=\"text-justify\">m</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/108/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/108/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Inventory</td>\n", "        <td class=\"text-justify\">tab</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/109/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/109/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Menu</td>\n", "        <td class=\"text-justify\">esc</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/134/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/134/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Map</td>\n", "        <td class=\"text-justify\">m</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/135/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/135/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Inventory</td>\n", "        <td class=\"text-justify\">tab</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/136/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/136/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Menu</td>\n", "        <td class=\"text-justify\">esc</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/161/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/161/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Map</td>\n", "        <td class=\"text-justify\">m</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/162/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/162/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Inventory</td>\n", "        <td class=\"text-justify\">tab</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/163/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/163/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Menu</td>\n", "        <td class=\"text-justify\">esc</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/188/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/188/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Map</td>\n", "        <td class=\"text-justify\">m</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/189/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/189/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Inventory</td>\n", "        <td class=\"text-justify\">tab</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/190/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/190/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Menu</td>\n", "        <td class=\"text-justify\">esc</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/215/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/215/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Map</td>\n", "        <td class=\"text-justify\">m</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/216/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/216/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Inventory</td>\n", "        <td class=\"text-justify\">tab</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/217/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/217/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Menu</td>\n", "        <td class=\"text-justify\">esc</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/242/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/242/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Map</td>\n", "        <td class=\"text-justify\">m</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/243/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/243/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Inventory</td>\n", "        <td class=\"text-justify\">tab</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/244/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/244/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Menu</td>\n", "        <td class=\"text-justify\">esc</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/269/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/269/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Map</td>\n", "        <td class=\"text-justify\">m</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/270/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/270/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Inventory</td>\n", "        <td class=\"text-justify\">tab</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/271/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/271/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Menu</td>\n", "        <td class=\"text-justify\">esc</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/296/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/296/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Map</td>\n", "        <td class=\"text-justify\">m</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/297/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/297/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Inventory</td>\n", "        <td class=\"text-justify\">tab</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/298/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/298/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Menu</td>\n", "        <td class=\"text-justify\">esc</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/323/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/323/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Map</td>\n", "        <td class=\"text-justify\">m</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/324/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/324/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Inventory</td>\n", "        <td class=\"text-justify\">tab</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/325/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/325/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Menu</td>\n", "        <td class=\"text-justify\">esc</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/377/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/377/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Map</td>\n", "        <td class=\"text-justify\">m</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/378/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/378/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Inventory</td>\n", "        <td class=\"text-justify\">tab</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/379/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/379/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Menu</td>\n", "        <td class=\"text-justify\">esc</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/404/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/404/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Map</td>\n", "        <td class=\"text-justify\">m</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/405/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/405/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Inventory</td>\n", "        <td class=\"text-justify\">tab</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/406/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/406/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Menu</td>\n", "        <td class=\"text-justify\">esc</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/431/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/431/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Map</td>\n", "        <td class=\"text-justify\">m</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/432/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/432/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "      <tr>\n", "        <td draggable=\"true\" class=\"drag-handle\" style=\"width: 10px;\">\u22ee\u22ee</td>\n", "        <td>Inventory</td>\n", "        <td class=\"text-justify\">tab</td>\n", "        <td class=\"text-justify\">tap</td>\n", "        <td class=\"text-justify\"></td>\n", "        <td class=\"space-x-2\">\n", "<button hx-get=\"/binding/433/edit\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-secondary\">Edit</button><button hx-delete=\"/binding/433/delete\" type=\"submit\" hx-target=\"#bindings-table\" class=\"uk-btn uk-btn-destructive\">Delete</button>        </td>\n", "      </tr>\n", "    </tbody>\n", "  </table>\n", "</div>\n"]}, "metadata": {}, "output_type": "display_data"}], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["def ex_tables0():\n", "    return Table(\n", "        Thead(Tr(Th('Name'),    Th('Age'), Th('City'))),\n", "        Tbody(Tr(Td('Alice'),   Td('25'),  Td('New York')),\n", "              Tr(Td('Bob'),     Td('30'),  Td('San Francisco')),\n", "              Tr(Td('Charlie'), Td('35'),  Td('London')),\n", "              sortable=True),\n", "        Tfoot(Tr(Td('Total'),   Td('90'))))"], "outputs": [], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["show(ex_tables0())"], "outputs": [{"data": {"text/plain": ["<IPython.core.display.HTML object>"], "text/html": ["<table class=\"uk-table uk-table-middle uk-table-divider uk-table-hover uk-table-small\">\n", "  <thead>\n", "    <tr>\n", "      <th>Name</th>\n", "      <th>Age</th>\n", "      <th>City</th>\n", "    </tr>\n", "  </thead>\n", "  <tbody uk-sortable>\n", "    <tr>\n", "      <td>Alice</td>\n", "      <td>25</td>\n", "      <td>New York</td>\n", "    </tr>\n", "    <tr>\n", "      <td>Bob</td>\n", "      <td>30</td>\n", "      <td>San Francisco</td>\n", "    </tr>\n", "    <tr>\n", "      <td>Charlie</td>\n", "      <td>35</td>\n", "      <td>London</td>\n", "    </tr>\n", "  </tbody>\n", "  <tfoot>\n", "    <tr>\n", "      <td>Total</td>\n", "      <td>90</td>\n", "    </tr>\n", "  </tfoot>\n", "</table>\n"]}, "metadata": {}, "output_type": "display_data"}], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["def ex_tables3():\n", "    return Table(\n", "        Thead(Tr(Th('Name'),    Th('Age'), Th('City'))),\n", "        Tbody(Tr(Td('Alice'),   Td('25'),  Td('New York')),\n", "              Tr(Td('Bob'),     Td('30'),  Td('San Francisco')),\n", "              Tr(Td('Charlie'), Td('35'),  Td('London')),\n", "              cls=SortableJS('.sortable')),\n", "        Tfoot(Tr(Td('Total'),   Td('90'))))"], "outputs": [], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["show(ex_tables3)"], "outputs": [{"data": {"text/plain": ["<IPython.core.display.HTML object>"], "text/html": ["<function ex_tables3 at 0x7362c9715080>"]}, "metadata": {}, "output_type": "display_data"}], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["def ex_tables2():\n", "    def body_render(k, v):\n", "        match k.lower():\n", "            case 'name': return Td(v, cls='font-bold')\n", "            case 'age':  return Td(f\"{v} years\")\n", "            case _:      return Td(v)\n", "\n", "    header_data = ['Name',          'Age',     'City']\n", "    body_data   =[{'Name': 'Alice', 'Age': 30, 'City': 'New York'},\n", "                  {'Name': 'Bob',   'Age': 25, 'City': 'London'}]\n", "\n", "    return TableFromDicts(header_data, body_data, \n", "        sortable=True)"], "outputs": [], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["show(ex_tables2())"], "outputs": [{"data": {"text/plain": ["<IPython.core.display.HTML object>"], "text/html": ["<table class=\"uk-table uk-table-middle uk-table-divider uk-table-hover uk-table-small\">\n", "  <thead>\n", "    <tr>\n", "      <th>Name</th>\n", "      <th>Age</th>\n", "      <th>City</th>\n", "    </tr>\n", "  </thead>\n", "  <tbody uk-sortable>\n", "    <tr>\n", "      <td>Alice</td>\n", "      <td>30</td>\n", "      <td>New York</td>\n", "    </tr>\n", "    <tr>\n", "      <td>Bob</td>\n", "      <td>25</td>\n", "      <td>London</td>\n", "    </tr>\n", "  </tbody>\n", "</table>\n"]}, "metadata": {}, "output_type": "display_data"}], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["def ex_tables1():\n", "    header =  ['Name',    'Age', 'City']\n", "    body   = [['Alice',   '25',  'New York'],\n", "              ['Bob',     '30',  'San Francisco'],\n", "              ['Charlie', '35',  'London']]\n", "    footer =  ['Total',   '90']\n", "    return TableFromLists(header, body, footer, sortable=True)"], "outputs": [], "execution_count": null}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "Ok. What's next?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "Now we need to implement the actual drag and drop functionality. This requires:\n", "\n", "1. Adding an endpoint that will handle the reordering when items are dropped\n", "2. Adding HTMX attributes to tell the table where to send the reordering information\n", "\n", "Would you like to start with creating the endpoint that will handle the reordering? We'll need to create a function that:\n", "- Receives the new order of items\n", "- Updates the sort_order values in the database\n", "- Returns the refreshed table\n", "\n", "Would you like me to help you with that first step?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "Yes please."]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "Let's create an endpoint to handle the reordering. First, we'll create a function that updates the sort order in the database. Here's a basic version:\n", "\n", "```python\n", "def update_binding_order(db, binding_id: int, new_order: int):\n", "    \"\"\"Update the sort_order of a binding\"\"\"\n", "    db.t.bindings.update(binding_id, {\"sort_order\": new_order})\n", "```\n", "\n", "Would you like to try this and then we can add the endpoint that will use this function? Or would you like me to explain more about how this function works first?"]}, {"cell_type": "code", "metadata": {}, "source": ["def update_binding_order(db, binding_id: int, new_order: int):\n", "    \"\"\"Update the sort_order of a binding\"\"\"\n", "    db.t.bindings.update(binding_id, {\"sort_order\": new_order})"], "outputs": [], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["L(db.t.bindings.rows_where(\"id = 113\"))[0]['sort_order']"], "outputs": [], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["help(db.t.bindings.update)"], "outputs": [{"name": "stdout", "output_type": "stream", "text": ["Help on method update in module fastlite.kw:\n", "\n", "update(updates: dict | None = None, pk_values: list | tuple | str | int | float | None = None, alter: bool = False, conversions: dict | None = None, xtra: dict | None = None, **kwargs) -> Any method of apswutils.db.Table instance\n", "\n"]}], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["db.t.bindings.update??"], "outputs": [{"name": "stdout", "output_type": "stream", "text": ["\u001b[0;31mSignature:\u001b[0m\n", "\u001b[0mdb\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mt\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mbindings\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mupdate\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0;34m\u001b[0m\n", "\u001b[0;34m\u001b[0m    \u001b[0mupdates\u001b[0m\u001b[0;34m:\u001b[0m \u001b[0mdict\u001b[0m \u001b[0;34m|\u001b[0m \u001b[0;32mNone\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0;32mNone\u001b[0m\u001b[0;34m,\u001b[0m\u001b[0;34m\u001b[0m\n", "\u001b[0;34m\u001b[0m    \u001b[0mpk_values\u001b[0m\u001b[0;34m:\u001b[0m \u001b[0mlist\u001b[0m \u001b[0;34m|\u001b[0m \u001b[0mtuple\u001b[0m \u001b[0;34m|\u001b[0m \u001b[0mstr\u001b[0m \u001b[0;34m|\u001b[0m \u001b[0mint\u001b[0m \u001b[0;34m|\u001b[0m \u001b[0mfloat\u001b[0m \u001b[0;34m|\u001b[0m \u001b[0;32mNone\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0;32mNone\u001b[0m\u001b[0;34m,\u001b[0m\u001b[0;34m\u001b[0m\n", "\u001b[0;34m\u001b[0m    \u001b[0malter\u001b[0m\u001b[0;34m:\u001b[0m \u001b[0mbool\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0;32mFalse\u001b[0m\u001b[0;34m,\u001b[0m\u001b[0;34m\u001b[0m\n", "\u001b[0;34m\u001b[0m    \u001b[0mconversions\u001b[0m\u001b[0;34m:\u001b[0m \u001b[0mdict\u001b[0m \u001b[0;34m|\u001b[0m \u001b[0;32mNone\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0;32mNone\u001b[0m\u001b[0;34m,\u001b[0m\u001b[0;34m\u001b[0m\n", "\u001b[0;34m\u001b[0m    \u001b[0mxtra\u001b[0m\u001b[0;34m:\u001b[0m \u001b[0mdict\u001b[0m \u001b[0;34m|\u001b[0m \u001b[0;32mNone\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0;32mNone\u001b[0m\u001b[0;34m,\u001b[0m\u001b[0;34m\u001b[0m\n", "\u001b[0;34m\u001b[0m    \u001b[0;34m**\u001b[0m\u001b[0mkwargs\u001b[0m\u001b[0;34m,\u001b[0m\u001b[0;34m\u001b[0m\n", "\u001b[0;34m\u001b[0m\u001b[0;34m)\u001b[0m \u001b[0;34m->\u001b[0m \u001b[0mAny\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n", "\u001b[0;31mDocstring:\u001b[0m <no docstring>\n", "\u001b[0;31mSource:\u001b[0m   \n", "\u001b[0;34m@\u001b[0m\u001b[0mpatch\u001b[0m\u001b[0;34m\u001b[0m\n", "\u001b[0;34m\u001b[0m\u001b[0;32mdef\u001b[0m \u001b[0mupdate\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mself\u001b[0m\u001b[0;34m:\u001b[0m\u001b[0mTable\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0mupdates\u001b[0m\u001b[0;34m:\u001b[0m \u001b[0mdict\u001b[0m\u001b[0;34m|\u001b[0m\u001b[0;32mNone\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;32mNone\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0mpk_values\u001b[0m\u001b[0;34m:\u001b[0m \u001b[0mlist\u001b[0m\u001b[0;34m|\u001b[0m\u001b[0mtuple\u001b[0m\u001b[0;34m|\u001b[0m\u001b[0mstr\u001b[0m\u001b[0;34m|\u001b[0m\u001b[0mint\u001b[0m\u001b[0;34m|\u001b[0m\u001b[0mfloat\u001b[0m\u001b[0;34m|\u001b[0m\u001b[0;32mNone\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;32mNone\u001b[0m\u001b[0;34m,\u001b[0m\u001b[0;34m\u001b[0m\n", "\u001b[0;34m\u001b[0m           \u001b[0malter\u001b[0m\u001b[0;34m:\u001b[0m \u001b[0mbool\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;32mFalse\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0mconversions\u001b[0m\u001b[0;34m:\u001b[0m \u001b[0mdict\u001b[0m\u001b[0;34m|\u001b[0m\u001b[0;32mNone\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;32mNone\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0mxtra\u001b[0m\u001b[0;34m:\u001b[0m\u001b[0mdict\u001b[0m\u001b[0;34m|\u001b[0m\u001b[0;32mNone\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;32mNone\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0;34m**\u001b[0m\u001b[0mkwargs\u001b[0m\u001b[0;34m)\u001b[0m \u001b[0;34m->\u001b[0m \u001b[0mAny\u001b[0m\u001b[0;34m:\u001b[0m\u001b[0;34m\u001b[0m\n", "\u001b[0;34m\u001b[0m    \u001b[0;32mif\u001b[0m \u001b[0;32mnot\u001b[0m \u001b[0mupdates\u001b[0m\u001b[0;34m:\u001b[0m \u001b[0mupdates\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;34m{\u001b[0m\u001b[0;34m}\u001b[0m\u001b[0;34m\u001b[0m\n", "\u001b[0;34m\u001b[0m    \u001b[0mupdates\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0m_process_row\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mupdates\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\n", "\u001b[0;34m\u001b[0m    \u001b[0;32mif\u001b[0m \u001b[0;32mnot\u001b[0m \u001b[0mxtra\u001b[0m\u001b[0;34m:\u001b[0m \u001b[0mxtra\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0mgetattr\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mself\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0;34m'xtra_id'\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0;34m{\u001b[0m\u001b[0;34m}\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\n", "\u001b[0;34m\u001b[0m    \u001b[0mupdates\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0;34m{\u001b[0m\u001b[0;34m**\u001b[0m\u001b[0mupdates\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0;34m**\u001b[0m\u001b[0mkwargs\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0;34m**\u001b[0m\u001b[0mxtra\u001b[0m\u001b[0;34m}\u001b[0m\u001b[0;34m\u001b[0m\n", "\u001b[0;34m\u001b[0m    \u001b[0;32mif\u001b[0m \u001b[0;32mnot\u001b[0m \u001b[0mupdates\u001b[0m\u001b[0;34m:\u001b[0m \u001b[0;32mreturn\u001b[0m \u001b[0;34m{\u001b[0m\u001b[0;34m}\u001b[0m\u001b[0;34m\u001b[0m\n", "\u001b[0;34m\u001b[0m    \u001b[0;32mif\u001b[0m \u001b[0mpk_values\u001b[0m \u001b[0;32mis\u001b[0m \u001b[0;32mNone\u001b[0m\u001b[0;34m:\u001b[0m \u001b[0mpk_values\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0;34m[\u001b[0m\u001b[0mupdates\u001b[0m\u001b[0;34m[\u001b[0m\u001b[0mo\u001b[0m\u001b[0;34m]\u001b[0m \u001b[0;32mfor\u001b[0m \u001b[0mo\u001b[0m \u001b[0;32min\u001b[0m \u001b[0mself\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mpks\u001b[0m\u001b[0;34m]\u001b[0m\u001b[0;34m\u001b[0m\n", "\u001b[0;34m\u001b[0m    \u001b[0mself\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0m_orig_update\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mpk_values\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0mupdates\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0mupdates\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0malter\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0malter\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0mconversions\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0mconversions\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\n", "\u001b[0;34m\u001b[0m    \u001b[0;32mreturn\u001b[0m \u001b[0mself\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mget_last\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mlegacy\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;32mFalse\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n", "\u001b[0;31mFile:\u001b[0m      /usr/local/lib/python3.11/site-packages/fastlite/kw.py\n", "\u001b[0;31mType:\u001b[0m      method\n"]}], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["db.t.bindings"], "outputs": [{"data": {"text/plain": ["<Table bindings (id, game_id, action_id, key_id, modifier_id, description, sort_order)>"]}, "metadata": {}, "output_type": "execute_result", "execution_count": null}], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["L(db.t.bindings.rows_where(\"id = 102\"))"], "outputs": [{"data": {"text/plain": ["(#1) [{'id': 102, 'game_id': 1, 'action_id': 20, 'key_id': 5, 'modifier_id': 1, 'description': None, 'sort_order': 121}]"]}, "metadata": {}, "output_type": "execute_result", "execution_count": null}], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["db.t.bindings.update(dict(id=102, sort_order=120))"], "outputs": [{"data": {"text/plain": ["{'id': 102,\n", " 'game_id': 1,\n", " 'action_id': 20,\n", " 'key_id': 5,\n", " 'modifier_id': 1,\n", " 'description': None,\n", " 'sort_order': 120}"]}, "metadata": {}, "output_type": "execute_result", "execution_count": null}], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["L(db.t.bindings.rows_where(\"id = 102\"))"], "outputs": [{"data": {"text/plain": ["(#1) [{'id': 102, 'game_id': 1, 'action_id': 20, 'key_id': 5, 'modifier_id': 1, 'description': None, 'sort_order': 120}]"]}, "metadata": {}, "output_type": "execute_result", "execution_count": null}], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["def update_binding_order(db, binding_id: int, new_order: int):\n", "    \"\"\"Update the sort_order of a binding\"\"\"\n", "    db.t.bindings.update(dict(id=binding_id, sort_order=new_order))"], "outputs": [], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["update_binding_order(db, 102, 121)"], "outputs": [], "execution_count": null}, {"cell_type": "code", "metadata": {}, "source": ["L(db.t.bindings.rows_where(\"id = 102\"))"], "outputs": [{"data": {"text/plain": ["(#1) [{'id': 102, 'game_id': 1, 'action_id': 20, 'key_id': 5, 'modifier_id': 1, 'description': None, 'sort_order': 121}]"]}, "metadata": {}, "output_type": "execute_result", "execution_count": null}], "execution_count": null}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "So. This works. What's next? Don't forget we need to add checks that two items in the same game don't get the samen 'sort_order'."]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "Good point! Let's enhance the update_binding_order function to handle this safely. We need to:\n", "\n", "1. First check if there's already an item with that sort_order in the same game\n", "2. If there is, we need to shift other items to make space\n", "\n", "Here's a suggested modification:\n", "\n", "```python\n", "def update_binding_order(db, binding_id: int, new_order: int):\n", "    \"\"\"Update the sort_order of a binding, shifting other items if needed\"\"\"\n", "    # Get the game_id for this binding\n", "    binding = next(db.t.bindings.rows_where(\"id = ?\", [binding_id]))\n", "    game_id = binding['game_id']\n", "    \n", "    # Check if there's already an item with this sort_order\n", "    existing = list(db.t.bindings.rows_where(\n", "        \"game_id = ? AND sort_order = ? AND id != ?\", \n", "        [game_id, new_order, binding_id]\n", "    ))\n", "    \n", "    if existing:\n", "        # Shift all items with sort_order >= new_order up by 1\n", "        db.t.bindings.update_where(\n", "            \"game_id = ? AND sort_order >= ?\",\n", "            [game_id, new_order],\n", "            {\"sort_order\": \"sort_order + 1\"}\n", "        )\n", "    \n", "    # Update the target binding\n", "    db.t.bindings.update(dict(id=binding_id, sort_order=new_order))\n", "```\n", "\n", "Would you like to try this version? We can test it to make sure it properly handles conflicts."]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "Are you sure this check isn't already handled by the HTMX extension we will be using? It would be foolish to make this check if it's already native to the HTMX solution."]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "You make an excellent point! The HTMX sortable extension actually handles the reordering logic for us. When items are dragged and dropped, it will send the new order of all items, not just a single item's new position. \n", "\n", "Let's first add the necessary HTMX attributes to handle the sorting, and then we can see exactly what data the extension sends us. This will help us understand whether we need additional checks or if the extension handles everything.\n", "\n", "Would you like me to show you how to add the HTMX sortable attributes to your table first?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "yes please"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "We need to modify our table to add the HTMX sortable attributes. Here's how to update the relevant parts:\n", "\n", "```python\n", "# In your create_bindings_table function, modify the Table creation:\n", "return Table(*rows, \n", "    cls=(TableT.hover, TableT.sm, TableT.striped),\n", "    hx_ext=\"sortable\",  # Enable sortable extension\n", "    sortable=\"true\",    # Make table sortable\n", "    hx_post=\"/reorder-bindings\",  # Endpoint that will receive the new order\n", "    hx_trigger=\"end-sortable\"     # Trigger when sorting ends\n", ")\n", "```\n", "\n", "Would you like to try this change? Once we see it working, we can create the endpoint that will receive the reordering data."]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "We haven't build the Endpoint yet. Shouldn't we build that first? Else we can't test the changed table."]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "Yes, you're absolutely right! We should create the endpoint first. Let's do that. \n", "\n", "The HTMX sortable extension will send us a list of IDs in their new order. Here's a basic endpoint to handle this:\n", "\n", "```python\n", "@app.post(\"binding/reorder-bindings\")\n", "def reorder_bindings(request):\n", "    # The new order comes in as a list of IDs in the form data\n", "    new_order = request.form.getlist('bindings[]')\n", "    \n", "    # Update each binding with its new position\n", "    for position, binding_id in enumerate(new_order):\n", "        db.t.bindings.update(dict(id=binding_id, sort_order=position))\n", "    \n", "    # Return the updated table\n", "    return create_bindings_table(db.t.bindings.rows_where(\"game_id = ?\", [game_id]), game_id)\n", "```\n", "\n", "Would you like me to explain how this works before we add the HTMX attributes to the table?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "Yes. Please explain.\n", "What is the type of the 'request' parameter?\n", "What are the 'form' and 'getlist' methods from this 'request' parameter."]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "The `request` parameter comes from your web framework (like Flask, FastAPI, etc.) and represents the incoming HTTP request. Since I don't see which web framework you're using, let me explain how this typically works:\n", "\n", "1. `request` is usually an object that contains all information about the incoming HTTP request, including:\n", "   - Headers\n", "   - Form data\n", "   - Query parameters\n", "   - Body content\n", "\n", "2. `request.form` is typically a dictionary-like object that contains form data sent in the request. In this case, HTMX will send the reordered IDs as form data.\n", "\n", "3. `getlist()` is a method used when you expect multiple values for the same form field name. For example, if your form data looks like:\n", "   ```\n", "   bindings[]=1&bindings[]=2&bindings[]=3\n", "   ```\n", "   `getlist('bindings[]')` would return `['1', '2', '3']`\n", "\n", "Would you like me to show you how to adapt this code for your specific web framework? Which framework are you using?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "I don't know which framework I use. I use FastHTML which uses a lot of HTMX. That is all I know."]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "Ah, in that case, let me help you find out what FastHTML uses. We need to:\n", "\n", "1. Check what kind of request object FastHTML provides\n", "2. Figure out how to handle form data in FastHTML\n", "\n", "Could you show me an example of another endpoint you already have in your code? That would help me understand how requests are handled in your application. Or if you have a route/endpoint definition somewhere in your code, that would be helpful too."]}, {"cell_type": "markdown", "metadata": {}, "source": ["Nowadays most web applications are built using backend systems that return a combination of JSON and HTML data over HTTP. Javascript, normally using frameworks such as React, Angular, or Vue, is used to combine the JSON and HTML together for display in the browser. This is an \u201cAPI based\u201d approach to web development.\n", "\n", "An alternative \u201chypermedia-based\u201d approach, used by HTMX, simplifies things greatly by just returning HTML. FastHTML is designed to create hypermedia applications. Nearly all of the complexity of client-server programming vanishes when using this approach. When going to a page directly, the server will respond with a standard HTML web page:"], "attachments": {}}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "I found info in the documentation from FastHTML. It seems it doesn't use a framwork. It skips that by using HTMX."]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "Ah, that's helpful! If FastHTML is directly using HTMX without a traditional web framework, we need to rethink our approach. \n", "\n", "In this case, we probably need to add attributes to our table rows that HTMX's sortable extension will use to track the items. Let's modify our table to:\n", "\n", "1. First add a proper ID to each row so HTMX can track it\n", "2. Then add the sorting endpoint\n", "\n", "Would you like me to show you how to modify the row creation in your table to include these HTMX-specific attributes? We'll need to make sure each row has a unique identifier that HTMX can use to track the sorting."]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "yes please"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "Let's modify how we create each row in your table. Here's how to update the row creation part:\n", "\n", "```python\n", "# In your data row creation, change the Tr creation to:\n", "rows.append(Tr(\n", "    Td(\"\u22ee\u22ee\", cls=\"drag-handle\", draggable=\"true\", style=\"width: 10px;\"),\n", "    Td(actions[b['action_id']][0]),\n", "    Td(next(db.t.game_keys.rows_where(\"id = ?\", [b['key_id']]))['name'],\n", "       cls=text_style),\n", "    Td(next(db.t.modifiers.rows_where(\"id = ?\", [b['modifier_id']]))['name'],\n", "       cls=text_style),\n", "    Td(b['description'],\n", "       cls=text_style),\n", "    Td(Button(\"Edit\", \n", "            hx_get=f\"/binding/{b_id}/edit\",\n", "            hx_target=\"#bindings-table\",\n", "            cls=ButtonT.secondary),\n", "       Button(\"Delete\", \n", "            hx_delete=f\"/binding/{b['id']}/delete\",\n", "            hx_target=\"#bindings-table\",\n", "            cls=ButtonT.destructive),\n", "        cls=\"space-x-2\"),\n", "    id=f\"binding-{b['id']}\",  # Add unique ID for each row\n", "    data_id=b['id']           # Add data attribute for sorting\n", "))\n", "```\n", "\n", "Would you like me to explain these changes before we proceed with the next step?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "I get it. What is the next step?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "Next, we need to update the Table attributes to tell HTMX how to handle the sorting. We need to:\n", "\n", "1. Add the sort target attributes\n", "2. Specify which elements can be sorted\n", "\n", "Here's how to modify the Table creation:\n", "\n", "```python\n", "return Table(*rows, \n", "    cls=(TableT.hover, TableT.sm, TableT.striped),\n", "    hx_ext=\"sortable\",                    # Enable sortable extension\n", "    sortable=\"true\",                      # Make table sortable\n", "    data_sortable_rows=\"tr[data-id]\",     # Only sort rows with data-id\n", "    data_sortable_handle=\".drag-handle\"   # Use our handle for dragging\n", ")\n", "```\n", "\n", "Would you like to try these changes and see if the drag handles appear correctly?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "I think we're not approaching this in the right way. If I look into the documentation, the sorting is only shown with lists and not with a table. Are you sure this will also work with tables?"]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "You raise a very good point! Let me check the HTMX sortable documentation...\n", "\n", "You're right - most examples show sorting with lists (`<ul>` and `<li>` elements). While technically it might work with tables, it would be more reliable to follow the documented approach.\n", "\n", "Would you like to:\n", "1. Try to convert the table to a list-based layout that maintains the same visual structure\n", "2. Or first check if there are any specific HTMX examples/documentation for sorting tables\n", "\n", "Which approach would you prefer to explore?"]}, {"cell_type": "code", "metadata": {}, "source": ["show(ex_tables1())"], "outputs": [{"data": {"text/plain": ["<IPython.core.display.HTML object>"], "text/html": ["<table class=\"uk-table uk-table-middle uk-table-divider uk-table-hover uk-table-small\">\n", "  <thead>\n", "    <tr>\n", "      <th>Name</th>\n", "      <th>Age</th>\n", "      <th>City</th>\n", "    </tr>\n", "  </thead>\n", "  <tbody uk-sortable>\n", "    <tr>\n", "      <td>Alice</td>\n", "      <td>25</td>\n", "      <td>New York</td>\n", "    </tr>\n", "    <tr>\n", "      <td>Bob</td>\n", "      <td>30</td>\n", "      <td>San Francisco</td>\n", "    </tr>\n", "    <tr>\n", "      <td>Charlie</td>\n", "      <td>35</td>\n", "      <td>London</td>\n", "    </tr>\n", "  </tbody>\n", "  <tfoot>\n", "    <tr>\n", "      <td>Total</td>\n", "      <td>90</td>\n", "    </tr>\n", "  </tfoot>\n", "</table>\n"]}, "metadata": {}, "output_type": "display_data"}], "execution_count": null}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Prompt**\n", "\n", "What is the problem here? It seems to ocure with the action category 4 which only has one action assigned to it."]}, {"cell_type": "markdown", "metadata": {}, "source": ["**AI Response**\n", "\n", "Looking at your error, it might be related to how we handle categories with only one action. We should check:\n", "\n", "1. Is there a problem with the sorting logic when there's only one item in a category?\n", "2. Are we handling the category headers correctly in relation to the sortable items?\n", "\n", "Could you show me the error message you're getting with category 4, or describe what happens when you try to interact with that category? This will help us pinpoint exactly what's going wrong."]}], "metadata": {"kernelspec": {"display_name": "python3", "language": "python", "name": "python3"}}, "nbformat": 4, "nbformat_minor": 4}