<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Region?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>

<VBox spacing="20.0" style="-fx-font-size: 14px;" xmlns="http://javafx.com/javafx/25" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.example.petshopdesktop.controllers.StaffAccountsController">
    <padding>
        <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
    </padding>

    <children>
        <HBox alignment="CENTER_LEFT" spacing="20.0">
            <children>
                <Label text="User Accounts" textFill="#2c3e50">
                    <font>
                        <Font name="System Bold" size="30.0" />
                    </font>
                </Label>
                <Region HBox.hgrow="ALWAYS" />
                <Button fx:id="btnCreateAccount" mnemonicParsing="false" onAction="#btnCreateAccountClicked" prefHeight="44.0" style="-fx-background-color: #FF6B6B; -fx-cursor: hand; -fx-background-radius: 8;" text="Create Account" textFill="WHITE">
                    <font>
                        <Font name="System Bold" size="14.0" />
                    </font>
                    <padding>
                        <Insets bottom="12.0" left="24.0" right="24.0" top="12.0" />
                    </padding>
                </Button>
                <Button fx:id="btnEditAccount" mnemonicParsing="false" onAction="#btnEditAccountClicked" prefHeight="44.0" style="-fx-background-color: #F4A261; -fx-cursor: hand; -fx-background-radius: 8;" text="Edit Account" textFill="WHITE">
                    <font>
                        <Font name="System Bold" size="14.0" />
                    </font>
                    <padding>
                        <Insets bottom="12.0" left="24.0" right="24.0" top="12.0" />
                    </padding>
                </Button>
                <Button fx:id="btnRefresh" mnemonicParsing="false" onAction="#btnRefreshClicked" prefHeight="44.0" prefWidth="118.0" style="-fx-background-color: #4ECDC4; -fx-cursor: hand; -fx-background-radius: 8;" text="Refresh" textFill="WHITE">
                    <font>
                        <Font name="System Bold" size="14.0" />
                    </font>
                    <padding>
                        <Insets bottom="12.0" left="24.0" right="24.0" top="12.0" />
                    </padding>
                </Button>
            </children>
        </HBox>

        <HBox alignment="CENTER_LEFT" spacing="10.0" style="-fx-background-color: white; -fx-background-radius: 14; -fx-border-width: 1; -fx-border-radius: 14; -fx-border-color: #e6e6e6;">
            <padding>
                <Insets bottom="10.0" left="15.0" right="15.0" top="10.0" />
            </padding>
            <children>
                <TextField fx:id="txtSearch" promptText="Search users..." style="-fx-border-width: 0; -fx-background-color: transparent;" HBox.hgrow="ALWAYS">
                    <font>
                        <Font size="15.0" />
                    </font>
                </TextField>
            </children>
        </HBox>

        <TableView fx:id="tvStaff" style="-fx-background-color: white; -fx-background-radius: 12;" VBox.vgrow="ALWAYS">
            <columns>
                <TableColumn fx:id="colUsername" prefWidth="140.0" text="Username" />
                <TableColumn fx:id="colName" prefWidth="170.0" text="Name" />
                <TableColumn fx:id="colEmail" prefWidth="210.0" text="Email" />
                <TableColumn fx:id="colPhone" prefWidth="130.0" text="Phone" />
                <TableColumn fx:id="colRole" prefWidth="100.0" text="Role" />
                <TableColumn fx:id="colStatus" prefWidth="90.0" text="Status" />
                <TableColumn fx:id="colCreated" prefWidth="150.0" text="Created" />
            </columns>
        </TableView>


        <Label fx:id="lblStatus" text="" textFill="#64748b" visible="false" managed="true">
            <font>
                <Font size="13.0" />
            </font>
        </Label>
        <Label fx:id="lblError" text="" textFill="#FF6B6B" wrapText="true" />
    </children>
</VBox>
