Reuse HML components

[beastgrim]

So I have reusable HTML component, ex textfield. For example its look like this:
textfield.leaf

<div class=#(class)>
    <p>
        <label class="label">#(title)</label>
        <br>
        <span data-name="#(name)">
        <input size="40" id="#(id)" placeholder="#(placeholder)" value="#(value)" type="#(type)" name="#(name)" accept="#(accept)">
        </span>
    </p>
</div>

Also I have data for this HTML component:

struct TextFiled: Encodable {
    var `class`: String?
    var title: String?
    var name: String?
    var placeholder: String?
    var value: String?
    var type: String?
    var accept: String?
}

struct Form: Encodable {
    var email: TextFiled
    var phone: TextFiled
    var address: TextFiled
}

I send data to render like this:

func routes(_ app: Application) throws {
    app.get { req async throws in
        return try await req.view.render("index", Form(
            email: TextFiled(...),
            phone: TextFiled(...),
            address: TextFiled(...)
       ))
    }
}

And I can't realise how to pass data to reusable textfields?
Intuitively it should be something like this, but it doesn't work.

<div class="form">
#extend("textfield") { #(email) }
#extend("textfield") { #(phone) }
#extend("textfield") { #(address) }
</div>

Thanks for any help how to do it.

[0xTim]

You can print out the context in the render function when debugging to see how it's passed in, but it should be something like email.name - Leaf uses Codable so it's based off keys rather than types