@paperbits/core/workshops/layout/ko/layoutDetails.html

Paperbits core components.

<div class="flex flex-column fit">
    <div class="flex-item flex-item-grow form" data-bind="scrollable: true">
        <div class="form-group">
            <label for="title" class="form-label">Title</label>
            <div class="input-group">
                <input type="text" id="title" class="form-control"
                    data-bind="textInput: layoutItem.title, validationElement: layoutItem.title, focus: true"
                    placeholder="i.e. Orders" maxlength="256" aria-required="true" />
                <button class="btn btn-danger input-group-btn" data-bind="validationMessageToggle: layoutItem.title"
                    type="button">!</button>
            </div>
        </div>

        <div class="form-group">
            <label for="permalinkTemplate" class="form-label">
                Permalink template
                <button class="btn btn-info" role="tooltip"
                    data-bind="tooltip: '<p>Permalink template determines which layout is applied to a page. Examples:</p><p><b>/blogs</b> - exact URL</p><p><b>/blogs/{blogId}</b> - variable segment</p><p><b>/blogs/*</b> - anything afterwards</p>'"></button>
            </label>
            <div class="input-group">
                <input type="text" id="permalinkTemplate" class="form-control"
                    data-bind="textInput: $component.permalinkTemplate, validationElement: $component.permalinkTemplate, disable: isDefaultLayout"
                    placeholder="/" maxlength="2000" spellcheck="false" aria-required="true" />
                <button class="btn btn-danger input-group-btn"
                    data-bind="validationMessageToggle: $component.permalinkTemplate" type="button">!</button>
            </div>
        </div>

        <div class="form-group">
            <label for="description" class="form-label">Description</label>
            <textarea id="description" class="form-control" data-bind="textInput: layoutItem.description"></textarea>
        </div>
    </div>


    <div class="flex-item btn-group">
        <!-- ko if: canDelete -->
        <button class="btn btn-default"
            data-bind="confirm: { message: 'Are you sure you want to delete this layout?', onConfirm: deleteLayout }">
            <i aria-hidden="true" class="paperbits-icon paperbits-simple-remove"></i>
            Delete layout
        </button>
        <!-- /ko -->
        <button class="btn btn-default" data-bind="click: copyLayout">
            <i aria-hidden="true" class="paperbits-icon paperbits-single-copy-04"></i>
            Copy layout
        </button>
    </div>
</div>