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

<?import javafx.scene.layout.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.ImageView?>
<?import javafx.geometry.Insets?>

<StackPane fx:id="overlayRoot" xmlns:fx="http://javafx.com/fxml"
           fx:controller="org.to.telegramfinalproject.UI.CheckPasswordController"
           styleClass="overlay-root">

    <!-- Dimmed background -->
    <Pane fx:id="overlayBackground" styleClass="overlay-background"/>

    <!-- Password card -->
    <VBox fx:id="checkPasswordCard"
          styleClass="privacy-card"
          spacing="16"
          alignment="CENTER"
          prefWidth="350" maxWidth="350"
          prefHeight="200" maxHeight="200">

        <!-- ===== Header ===== -->
        <HBox alignment="CENTER_LEFT" spacing="10" styleClass="privacy-header">
            <!-- Back -->
            <Button fx:id="backButton" styleClass="icon-button"/>
            <Label text="Confirm Password" styleClass="privacy-title"/>
            <Pane HBox.hgrow="ALWAYS"/>
            <!-- Close -->
            <Button fx:id="closeButton" styleClass="icon-button" text="✕"/>
        </HBox>

        <Separator/>

        <!-- ===== Form ===== -->
        <VBox spacing="10" alignment="CENTER_LEFT" styleClass="privacy-form">
            <Label fx:id="passwordLabel" text="Enter your current password"
                   styleClass="password-label"/>
            <HBox alignment="CENTER_LEFT" spacing="4" styleClass="privacy-item">
                <PasswordField fx:id="passwordField"
                               promptText="Current password"
                               styleClass="privacy-input"
                               HBox.hgrow="ALWAYS"/>
                <TextField fx:id="visiblePasswordField"
                           promptText="Current password"
                           styleClass="privacy-input"
                           visible="false"
                           managed="false"
                           HBox.hgrow="ALWAYS"/>
                <Button fx:id="toggleVisibilityBtn"
                        text="👁"
                        styleClass="toggle-visibility-btn"/>
            </HBox>
        </VBox>

        <!-- ===== Actions ===== -->
        <HBox alignment="CENTER_RIGHT" spacing="10">
            <Button fx:id="cancelButton" text="Cancel" styleClass="footer-button"/>
            <Button fx:id="confirmButton" text="Next" styleClass="action-button"/>
        </HBox>
    </VBox>
</StackPane>
