nano-buckets/resources/views/bucket/form.html

<% layout('./../layout.html') %>

<div class="container container--app">
    <div class="grid">
        <div class="col-12">
            <h1 class="highlight">
                Create Bucket
            </h1>
        </div>
        <div class="col-12">
            <form id="form" action="/bucket/store" method="POST" novalidate >
                <div class="field-group">
                    <label class="field-label">
                        title*
                        <input class="field-text" name="title" type="text" />
                    </label>
                    <field-error name="title"></field-error>
                </div>
                <div class="field-group">
                    <label class="field-label">
                        description*
                        <input class="field-text" name="description" type="text" />
                    </label>
                    <field-error name="description"></field-error>
                </div>
                <div class="field-group">
                    <div class="m-top-4 m-bottom-3">
                        type*
                    </div>
                    <% it.types.forEach(function(type) { %>
                        <label class="field-label m-right-3">
                            <input class="field-choice" name="type" type="radio" value="<%= type.value %>" />
                            <svg class="icon field-choice__unchecked" aria-hidden="true">
                                <use xlink:href="/symbol-defs.svg#icon-circle"></use>
                            </svg>
                            <svg class="icon field-choice__checked" aria-hidden="true">
                                <use xlink:href="/symbol-defs.svg#icon-circle-check"></use>
                            </svg>
                            <%= type %>
                        </label>
                    <% }) %>
                    <field-error name="type"></field-error>
                </div>
                <div class="field-group">
                    <div class="m-top-4 m-bottom-3">
                        visiblity*
                    </div>
                    <% it.visiblities.forEach(function(visiblity) { %>
                        <label class="field-label m-right-3">
                            <input class="field-choice" name="visiblity" type="radio" value="<%= visiblity.value %>" />
                            <svg class="icon field-choice__unchecked" aria-hidden="true">
                                <use xlink:href="/symbol-defs.svg#icon-circle"></use>
                            </svg>
                            <svg class="icon field-choice__checked" aria-hidden="true">
                                <use xlink:href="/symbol-defs.svg#icon-circle-check"></use>
                            </svg>
                            <%= visiblity %>
                        </label>
                    <% }) %>
                    <field-error name="visiblity"></field-error>
                </div>

                <div class="m-top-5">
                    <button class="button hover-fill-text-constrast">
                        Create
                        <svg class="icon p-left-3 size-large" aria-hidden="true">
                            <use xlink:href="/symbol-defs.svg#icon-circle-add"></use>
                        </svg>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript" src="/js/create-bucket.js" defer></script>