Drawer

open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar

let accountDrawerContent refreshed =
    div {
        _id "account-drawer-content"
        _class "grid gap-5"
        DescriptionList.create [
            DetailField.text "Account name" "Operating checking"
            DetailField.text "Type" "Asset"
            DetailField.text "Currency" "USD"
            DetailField.status "Status" (Status.positive "Active")
        ]
        |> DescriptionList.render
        p { _class "text-sm text-[var(--fve-muted-text)]"; "Last reconciled September 15, 2026 by Andy Meier." }
        Button.create "Refresh details"
        |> Button.withAttributes [ _id "account-drawer-refresh"; _dataOn ("click", "@get('/components/drawers/account').then(() => document.getElementById('account-drawer-refresh')?.focus())") ]
        |> Button.render
        if refreshed then
            p { _role "status"; _class "text-sm text-[var(--fve-positive-text)]"; "Account details refreshed from the server." }
    }

let accountDrawerConfig =
    Drawer.create "account-settings-drawer" "Account details" (accountDrawerContent false)
    |> Drawer.withDescription "Review the selected account without leaving the current page."
    |> Drawer.withInitialFocus "account-drawer-refresh"

let accountDrawerExample =
    div {
        accountDrawerConfig |> Drawer.trigger "Open account details"
        accountDrawerConfig |> Drawer.render
    }

open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar

let accountEditorBody =
    form {
        _id "account-editor-form"
        _class "grid gap-6"
        section {
            _ariaLabelledby "account-editor-basics"
            _class "grid gap-4"
            h3 { _id "account-editor-basics"; _class "text-base font-semibold"; "Account basics" }
            Input.create "accountName" "Account name"
            |> Input.withId "account-editor-name"
            |> Input.withValue "Operating checking"
            |> Input.withDescription "Use the name shown throughout reporting and reconciliation."
            |> Input.render
            Select.create "accountType" "Account type" id [
                Select.option "asset" "Asset"
                Select.option "liability" "Liability"
                Select.option "equity" "Equity"
                Select.option "revenue" "Revenue"
                Select.option "expense" "Expense"
            ]
            |> Select.withId "account-editor-type"
            |> Select.withSelected "asset"
            |> Select.render
            Input.create "accountNumber" "Account number"
            |> Input.withValue "1040"
            |> Input.render
        }
        section {
            _ariaLabelledby "account-editor-reporting"
            _class "grid gap-4 border-t border-[var(--fve-border)] pt-6"
            h3 { _id "account-editor-reporting"; _class "text-base font-semibold"; "Reporting" }
            Input.create "reportingGroup" "Reporting group"
            |> Input.withValue "Cash and cash equivalents"
            |> Input.render
            Textarea.create "accountNotes" "Internal notes"
            |> Textarea.withRows 5
            |> Textarea.withValue "Primary operating account for Northwind Outdoor."
            |> Textarea.withDescription "Only workspace members can read these notes."
            |> Textarea.render
        }
    }

let accountEditorFooter =
    div {
        _class "flex flex-wrap justify-end gap-3"
        Button.create "Cancel"
        |> Button.withAttributes [ _dataOn ("click", "document.getElementById('account-editor-drawer')?.close()") ]
        |> Button.render
        Button.create "Save changes"
        |> Button.asSubmit
        |> Button.withAttributes [ _attr ("form", "account-editor-form") ]
        |> Button.render
    }

let accountEditorDrawerConfig =
    Drawer.create "account-editor-drawer" "Edit account" accountEditorBody
    |> Drawer.withDescription "Update the account fields used by reporting and reconciliation."
    |> Drawer.withFooter accountEditorFooter
    |> Drawer.withInitialFocus "account-editor-name"
    |> Drawer.withWidth DrawerWidth.Wide

let accountEditorDrawerExample =
    div {
        accountEditorDrawerConfig |> Drawer.trigger "Edit account"
        accountEditorDrawerConfig |> Drawer.render
    }

open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar

let filterDrawerConfig =
    Drawer.create "account-filters-drawer" "Account filters" (
        nav {
            _ariaLabel "Account filters"
            _class "grid gap-3"
            a { _href "/components/drawer#active"; "Active accounts" }
            a { _href "/components/drawer#archived"; "Archived accounts" }
        })
    |> Drawer.withSide DrawerSide.Start

let filterDrawerExample =
    div {
        filterDrawerConfig |> Drawer.trigger "Open filters"
        filterDrawerConfig |> Drawer.render
    }