appwrite/app/views/console/functions/index.phtml

<?php
$runtimes = $this->getParam('runtimes', []);
?>
<div class="cover">
    <h1 class="zone xl margin-bottom-large">
        <a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small link-return-animation--start"><i class="icon-left-open"></i> Home</a>
        <br />

        <span>Functions</span>
    </h1>
</div>

<div class="zone xl">
    <ul class="phases clear" data-ui-phases data-selected="{{router.params.tab}}">
        <li data-state="/console/functions?project={{router.params.project}}">
            <h2>Functions</h2>

            <div class="zone xl"
                data-service="functions.list"
                data-scope="sdk"
                data-event="load,functions.create,functions.update,functions.delete"
                data-name="project-functions"
                data-param-project-id="{{router.params.project}}"
                data-param-limit="<?php echo APP_PAGING_LIMIT; ?>"
                data-param-offset=""
                data-param-order-type="DESC"
                data-success="trigger"
                data-success-param-trigger-events="functions.list">

                <div data-ls-if="0 == {{project-functions.functions.length}} || undefined == {{project-functions.functions.length}}" class="box margin-top margin-bottom">
                    <h3 class="margin-bottom-small text-bold">No Functions Found</h3>

                    <p class="margin-bottom-no">You haven't created any functions for your project yet.</p>
                </div>

                <div data-ls-if="0 != {{project-functions.functions.length}}">
                    <div class="margin-bottom-small text-align-end text-size-small margin-top-negative text-fade"><span data-ls-bind="{{project-functions.sum}}"></span> functions found</div>

                    <div class="box margin-bottom">
                        <ul data-ls-loop="project-functions.functions" data-ls-as="function" class="list">
                            <li class="clear">
                                <div class="pull-start margin-end avatar-container">
                                    <img src="" data-ls-attrs="src=/images/runtimes/{{function.runtime|runtimeLogo}}?v=<?php echo APP_CACHE_BUSTER; ?>" alt="Function Runtime" class="avatar" loading="lazy" width="60" height="60" />
                                </div>

                                <a data-ls-attrs="href=/console/functions/function?id={{function.$id}}&project={{router.params.project}}" class="button pull-end">Settings</a>

                                <span data-ls-bind="{{function.name}}"></span>

                                <p class="text-fade margin-bottom-no" data-ls-bind="{{function.runtime|runtimeName}} {{function.runtime|runtimeVersion}}"></p>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="pull-end text-align-center paging">
                    <form
                        data-service="functions.list"
                        data-event="submit"
                        data-param-search="{{router.params.search}}"
                        data-param-limit="<?php echo APP_PAGING_LIMIT; ?>"
                        data-param-order-type="DESC"
                        data-scope="sdk"
                        data-name="project-functions"
                        data-success="state"
                        data-success-param-state-keys="search,offset">
                        <button name="offset" data-paging-back data-offset="{{router.params.offset}}" data-sum="{{project-users.sum}}" class="margin-end round small" aria-label="Back"><i class="icon-left-open"></i></button>
                    </form>

                    <span data-ls-bind="{{router.params.offset|pageCurrent}} / {{project-functions.sum|pageTotal}}"></span>

                    <form
                        data-service="functions.list"
                        data-event="submit"
                        data-param-search="{{router.params.search}}"
                        data-param-limit="<?php echo APP_PAGING_LIMIT; ?>"
                        data-param-order-type="DESC"
                        data-scope="sdk"
                        data-name="project-functions"
                        data-success="state"
                        data-success-param-state-keys="search,offset">
                        <button name="offset" data-paging-next data-offset="{{router.params.offset}}" data-sum="{{project-functions.sum}}" class="margin-start round small" aria-label="Next"><i class="icon-right-open"></i></button>
                    </form>
                </div>

                <div class="clear">
                    <div data-ui-modal class="modal close box sticky-footer" data-button-text="Add Function">
                        <button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>

                        <h1>Add Function</h1>

                        <form
                            data-analytics
                            data-analytics-activity
                            data-analytics-event="submit"
                            data-analytics-category="console"
                            data-analytics-label="Create Project Function"
                            data-service="functions.create"
                            data-scope="sdk"
                            data-event="submit"
                            data-success="alert,trigger,reset,redirect"
                            data-success-param-alert-text="Created function successfully"
                            data-success-param-trigger-events="functions.create"
                            data-success-param-redirect-url="/console/functions/function?id={{serviceData.$id}}&project={{router.params.project}}"
                            data-failure="alert"
                            data-failure-param-alert-text="Failed to create function"
                            data-failure-param-alert-classname="error">
                            <label for="functionId">Function ID</label>
                            <input
                                type="hidden"
                                data-custom-id
                                data-id-type="auto"
                                data-validator="functions.get"
                                required
                                maxlength="36"
                                pattern="^[a-zA-Z0-9][a-zA-Z0-9._-]{1,36}$"
                                name="functionId" />

                            <label for="name">Name</label>
                            <input type="text" id="name" name="name" required autocomplete="off" class="margin-bottom" maxlength="128" />

                            <label for="runtime">Runtimes</label>
                            <select name="runtime" id="runtime" required class="margin-bottom-xl">
                                <?php foreach ($runtimes as $key => $runtime): ?>
                                    <option value="<?php echo $this->escape($key); ?>"><?php echo $this->escape($runtime['name']); ?> <?php echo $this->escape($runtime['version']); ?></option>
                                <?php endforeach;?>
                            </select>

                            <input id="execute" name="execute" value="" hidden />

                            <footer>
                                <button type="submit">Create</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
                            </footer>
                        </form>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>