id: deploy
type: PageSiderMenu
properties:
  title: Deploy

areas:
  content:
    blocks:
      - id: title
        type: Title
        layout:
          grow: 1
        properties:
          content: Deploy
      - id: macaddress
        type: TextInput
        properties:
          title: MAC Address
          placeholder: 00:00:00:00:00:00
      - id: projectname
        type: TextInput
        properties:
          title: Project name
      - id: hostname
        type: TextInput
        properties:
          title: Hostname
      - id: ipaddress
        type: TextInput
        properties:
          title: IP address
          placeholder: 0.0.0.0
      - id: subnetmask
        type: TextInput
        properties:
          title: Subnet mask
          placeholder: 255.255.255.0
      - id: gateway
        type: TextInput
        properties:
          title: Gateway
          placeholder: 0.0.0.0
      - id: dnsserver
        type: TextInput
        properties:
          title: DNS server
          placeholder: 0.0.0.0, 0.0.0.0
      - id: dnssuffix
        type: TextInput
        properties:
          title: DNS suffix
          placeholder: example.org

      # Again use the grow (css flex-grow) layout property to lay out the buttons.
      - id: back # Create a back button that will link back to the brands page without making any changes.
        type: Button
        layout:
          grow: 1 # Because the button has a grow of 1, it will expand to take up available space.
        properties:
          title: Back
          icon: ArrowLeftOutlined
          type: default # Change the type of the button to default.
          block: true # Makes the button fill the maximum defined width instead of only the with of its contents (title and icon).
        events:
          onClick:
            - id: link_to_brands # When clicked, link back to the brands page.
              type: Link
              params:
                pageId: brands
      - id: reset_button
        type: Button
        layout:
          grow: 1 # Because the button has a grow of 1, it will expand to take up available space.
        properties:
          title: Reset
          type: default
          Icon: ReloadOutlined
        actions:
          onClick:
            - id: reset
              type: reset()
      - id: update_brand
        type: Button
        layout:
          grow: 3 # Because the button has a grow of 3, which is 3 times as large as the
          # grow value of the back and delete buttons, it will expand "3 times bigger",
          # and occupy more space in the row. It will be laid out in the same row as the other
          # buttons, unless there is not enough space for all three buttons, in which case it will
          # drop down to the next row by following css flex layout behavior.
        properties:
          title: Save
          icon: SaveOutlined
          block: true
        requests:
          - id: update_brand
            type: MongoDBUpdateOne # MongoDb updateOne request to update the brand.
            connectionId: brands
            properties:
              filter:
                _id:
                  _state: _id # Select the document that matches the document's _id that is in state.
              update:
                $set:
                  name:
                    _state: name # Insert the brand name we set in state.
                  description:
                    _state: description # Insert the description name we set in state.
                  updated_at:
                    _date: now # Set the updated_at date as current time.
        events:
          onClick:
            - id: update_brand  # Call the update_brand request.
              type: Request
              params: update_brand
            - id: link_to_brands # Link back to the brands page.
              type: Link
              params:
                pageId: brands
      - id: delete_modal
        type: ConfirmModal
        properties:
          content: Are you sure you want to delete this brand? # The text inside the modal.
          okText: Yes # Change the default text of the ok button to 'Yes'.
          okButton:
            type: danger # Change the default type of the ok button to danger.
          cancelText: No # Change the default text of the cancel button to 'No'.
        requests:
          - id: delete_brand
            type: MongoDBDeleteOne # MongoDb Delete One request to delete the brand's document from the collection.
            connectionId: brands
            properties:
              filter:
                _id:
                  _state: _id # Filter the document that matches the document's _id.
        events:
          onOk:
            - id: delete_brand # Call the delete_brand request.
              type: Request
              params: delete_brand
            - id: link_to_brands
              type: Link
              params:
                pageId: brands