appwrite/app/views/console/database/document.phtml

<div
    data-service="database.getCollection"
    data-param-collection-id="{{router.params.collection}}"
    data-scope="sdk"
    data-event="load,database.updateCollection"
    data-name="project-collection">

    <div
        data-service="database.getDocument"
        data-param-collection-id="{{router.params.collection}}"
        data-param-document-id="{{router.params.id}}"
        data-scope="sdk"
        data-event="load"
        data-name="project-document"
        data-success="default">

        <div class="cover">
            <h1 class="zone xl margin-bottom-large">
                <a data-ls-attrs="href=/console/database/collection?id={{router.params.collection}}&project={{router.params.project}}" class="back text-size-small"><i class="icon-left-open"></i> Collection</a>

                <br />

                <span data-ls-if="({{project-document.$id}})" data-ls-bind="Update Document">&nbsp;&nbsp;</span>
                <span data-ls-if="(!{{project-document.$id}})" data-ls-bind="New Document">&nbsp;&nbsp;</span>
            </h1>
        </div>

        <div class="zone xl">
            <ul class="phases clear" data-ui-phases data-selected="{{router.params.tab}}">
                <li data-state="/console/database/document?id={{router.params.id}}&collection={{router.params.collection}}&project={{router.params.project}}">
                    <h2>Update</h2>

                    <div class="row responsive margin-top-negative">
                        <div class="col span-8 margin-bottom">
                            <form
                                data-analytics-event="submit"
                                data-analytics-category="console"
                                data-analytics-label="Update Database Document"
                                data-service="{{|documentAction}}"
                                data-name="project-document"
                                data-scope="sdk"
                                data-event="submit"
                                data-success="alert,trigger"
                                data-success-param-alert-text="Updated document successfully"
                                data-success-param-trigger-events="database.xupdateDocument"
                                data-failure="alert"
                                data-failure-param-alert-text="Failed to update document"
                                data-failure-param-alert-classname="error">

                                <label>&nbsp;</label>

                                <div class="box">
                                    <div data-ls-template="template-main" data-type="script"></div>
                                </div>

                            </form>
                        </div>
                        <div class="col span-4 sticky-top">

                            <div data-ls-if="({{project-document.$id}})">
                                <label>Document ID</label>
                                <div class="input-copy margin-bottom">
                                    <input type="text" autocomplete="off" placeholder="" data-ls-bind="{{project-document.$id}}" disabled data-forms-copy class="margin-bottom-no" />
                                </div>
                            </div>

                            <label>Collection ID</label>
                            <div class="input-copy margin-bottom">
                                <input type="text" autocomplete="off" placeholder="" data-ls-bind="{{project-collection.$id}}" disabled data-forms-copy class="margin-bottom-no" />
                            </div>

                            <div data-ls-if="({{project-document.$id}})">
                                <form name="database.deleteDocument" class="margin-bottom"
                                    data-analytics-event="submit"
                                    data-analytics-category="console"
                                    data-analytics-label="Delete Collection Document"
                                    data-service="database.deleteDocument"
                                    data-event="submit"
                                    data-param-collection-id="{{router.params.collection}}"
                                    data-param-document-id="{{project-document.$id}}"
                                    data-confirm="Are you sure you want to delete this document?"
                                    data-success="alert,trigger,redirect"
                                    data-success-param-alert-text="Document deleted successfully"
                                    data-success-param-trigger-events="database.deleteDocument"
                                    data-success-param-redirect-url="/console/database/collection?id={{router.params.collection}}&project={{router.params.project}}"
                                    data-failure="alert"
                                    data-failure-param-alert-text="Failed to delete collection"
                                    data-failure-param-alert-classname="error">

                                    <button type="submit" class="danger fill">Delete Document</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </li>
                <li data-ls-if="{{project-document.$id}}" data-state="/console/database/document/activity?id={{router.params.id}}&collection={{router.params.collection}}&project={{router.params.project}}">
                    <h2>Activity</h2>
                </li>
            </ul>
        </div>
    </div>
</div>

<?php
$list = [
    [
        'key' => '',
        'bind' => '{{project-document|documentLabel}}',
    ],
    [
        'key' => '-array',
        'bind' => '{{node}}',
    ],
    [
        'key' => '-child',
        'bind' => '{{project-document|documentLabel}}.{{rule.key}}{{childRule.key}}',
    ],
];
?>

<?php foreach($list as $mode): ?>
    <script type="text/html" id="xtemplate-document-form<?php echo $mode['key']; ?>">
        <div class="info margin-bottom-small">
            
            <fieldset data-ls-attrs="name={{rule.key}},{{rule.required|documentRequired}}" data-cast-to="object">
                <textarea data-ls-attrs="data-ls-bind=\{\{project-document.{{rule.key}}.$id\}\}" type="text" autocomplete="off" data-ls-bind="<?php echo $mode['bind']; ?>"></textarea>
                <textarea data-ls-attrs="data-ls-bind=\{\{project-document.{{rule.key}}.name\}\}" type="text" autocomplete="off" data-ls-bind="<?php echo $mode['bind']; ?>"></textarea>
            </fieldset>
        </div>

        <button type="button" class="reverse margin-end-small">Add</button>
        <button type="button" class="reverse">Search</button>
    </script>

    <script type="text/html" id="xtemplate-document-form<?php echo $mode['key']; ?>">
    
        <fieldset data-ls-attrs="name={{rule.key}},{{rule.required|documentRequired}}" data-cast-to="object">
            
            <input name="$id" type="hidden" data-ls-bind="{{project-document.$id}}" />
            <input name="$collection" type="hidden" data-ls-bind="{{project-collection.$id}}" />

            <ul data-ls-loop="project-collection.rules" data-ls-as="rule">
                <li>
                    <label class="margin-bottom-no">
                        <span data-ls-bind="{{rule.label}}"></span>
                        <span data-ls-if="{{rule.array}}.toString() == 'true'">
                            <span class="text-size-small text-fade">&nbsp;&nbsp;(Array)</span>
                        </span>
                    </label>

                    <div data-ls-if="{{rule.required}}.toString() == 'true'" class="margin-bottom-small">
                        <span class="text-size-xs text-danger text-fade">required</span>
                    </div>

                    <div data-ls-if="({{rule.required}}.toString() == 'false')" class="margin-bottom-small">
                        <span class="text-size-xs text-fade">optional</span>
                    </div>

                    <div data-ls-if="({{rule.array}}.toString() == 'false')">
                        <div data-ls-template="template-{{rule.type}}-form" data-type="script" class="margin-bottom"></div>
                    </div>

                    <div data-ls-if="({{rule.array}}.toString() == 'true')">
                        <div data-ls-template="template-array-form" data-type="script" class="margin-bottom"></div>
                    </div>
                </li>
            </ul>
        </fieldset>
    </script>

    <script type="text/html" id="template-text-form<?php echo $mode['key']; ?>">
        <input data-ls-attrs="name={{rule.key}},{{rule.required|documentRequired}}" type="text" autocomplete="off" data-ls-bind="<?php echo $mode['bind']; ?>" data-forms-text-direction data-forms-text-count />
    </script>

    <script type="text/html" id="template-string-form<?php echo $mode['key']; ?>">
        <textarea data-ls-attrs="name={{rule.key}},{{rule.required|documentRequired}}" type="text" autocomplete="off" data-ls-bind="<?php echo $mode['bind']; ?>" data-forms-text-direction data-forms-text-count></textarea>
    </script>

    <script type="text/html" id="template-numeric-form<?php echo $mode['key']; ?>">
        <input data-ls-attrs="name={{rule.key}},{{rule.required|documentRequired}}" type="number" autocomplete="off" data-ls-bind="<?php echo $mode['bind']; ?>" data-cast-to="integer" />
    </script>

    <script type="text/html" id="template-boolean-form<?php echo $mode['key']; ?>">
        <input data-ls-attrs="name={{rule.key}},{{rule.required|documentRequired}}" type="hidden" data-forms-switch data-ls-bind="<?php echo $mode['bind']; ?>" data-cast-to="boolean" />
    </script>

    <script type="text/html" id="template-url-form<?php echo $mode['key']; ?>">
        <input data-ls-attrs="name={{rule.key}},{{rule.required|documentRequired}}" type="url" data-ls-bind="<?php echo $mode['bind']; ?>" placeholder="https://example.com" />

        <div class="preview" data-ls-if="(<?php echo $mode['bind']; ?>.toString() !== '')">
            
        </div>
    </script>
<?php endforeach; ?>

<script type="text/html" id="template-array-form">
    <input type="hidden" data-ls-attrs="name={{rule.key}},{{rule.required|documentRequired}}" data-cast-to="array-empty">

    <ul data-forms-add="New" data-ls-loop="project-document.{{rule.key}}" data-ls-as="node" class="sortable">
        <li data-forms-remove data-forms-move-up  data-forms-move-down>
            <div class="row thin responsive margin-bottom-small force-reverse">
                <div class="col span-1">
                    <div class="drop-list bottom end" data-ls-ui-open="" data-button-text="" data-button-icon="icon-cog" data-button-selector="[data-toggler]" data-button-class="round dark small margin-bottom-small margin-top-tiny pull-end" data-blur="1" tabindex="1">
                        <ul>
                            <li data-move-up>
                                <button type="button" class="link"><i class="icon-up-dir"></i> Move Up</button>
                            </li>
                            <li data-move-down>
                                <button type="button" class="link"><i class="icon-down-dir"></i> Move Down</button>
                            </li>
                            <li data-remove>
                                <button type="button" class="link"><i class="icon-cancel"></i> Remove</button>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col span-11">
                    <div data-ls-template="template-{{rule.type}}-form-array" data-type="script" class="margin-bottom"></div>
                </div>
            </div>

            <hr class="margin-top-no" />
        </li>
    </ul>

</script>

<script type="text/html" id="template-main">

    <input name="documentId" type="hidden" data-ls-bind="{{project-document.$id}}" />
    <input name="collectionId" type="hidden" data-ls-bind="{{project-collection.$id}}" />

    <fieldset name="data" data-cast-to="object">
        <ul data-ls-loop="project-collection.rules" data-ls-as="rule">
            <li>
                <label class="margin-bottom-no">
                    <span data-ls-bind="{{rule.label}}"></span>
                    <span data-ls-if="{{rule.array}}.toString() == 'true'">
                        <span class="text-size-small text-fade">&nbsp;&nbsp;(Array)</span>
                    </span>
                </label>
                
                <div data-ls-if="{{rule.required}}.toString() == 'true'" class="margin-bottom-small">
                    <span class="text-size-xs text-danger text-fade">required</span>
                </div>

                <div data-ls-if="({{rule.required}}.toString() == 'false')" class="margin-bottom-small">
                    <span class="text-size-xs text-fade">optional</span>
                </div>

                <div data-ls-if="({{rule.array}}.toString() == 'false')">
                    <div data-ls-template="template-{{rule.type}}-form" data-type="script" class="margin-bottom"></div>
                </div>

                <div data-ls-if="({{rule.array}}.toString() == 'true')">
                    <div data-ls-template="template-array-form" data-type="script" class="margin-bottom"></div>
                </div>
            </li>
        </ul>
    </fieldset>

    <div class="toggle margin-bottom margin-top" data-ls-ui-open>
        <i class="icon-plus pull-end margin-top-tiny"></i>
        <i class="icon-minus pull-end margin-top-tiny"></i>
        
        <h3 class="margin-bottom-large">Permissions</h3>
        
        <label for="collection-read">Read Permissions <span class="text-size-small">(<a data-ls-attrs="href={{env.HOME}}/docs/permissions" target="_blank">Learn more</a>)</span></label>
        <input type="hidden" id="collection-read" name="read" data-forms-tags data-cast-to="json" data-ls-bind="{{project-document.$permissions.read}}" placeholder="User ID, Team ID or Role" />
                        
        <label for="collection-write">Write Permissions <span class="text-size-small">(<a data-ls-attrs="href={{env.HOME}}/docs/permissions" target="_blank">Learn more</a>)</label>
        <input type="hidden" id="collection-write" name="write" data-forms-tags data-cast-to="json" data-ls-bind="{{project-collection.$permissions.write}}" placeholder="User ID, Team ID or Role" />
    </div>

    <button>Update</button>

</script>

<div
    data-service="database.listCollections"
    data-event="load,database.createCollection,database.updateCollection,database.deleteCollection"
    data-scope="sdk"
    data-name="project-collections">
</div>