@paperbits/core/workshops/media/ko/mediaDetails.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="fileName" class="form-label">
                Name
            </label>
            <div class="input-group">
                <input type="text" id="fileName" class="form-control"
                    data-bind="textInput: mediaItem.fileName, validationElement: mediaItem.fileName"
                    placeholder="i.e. Orders" maxlength="256" />
                <button class="btn btn-danger input-group-btn" data-bind="validationMessageToggle: mediaItem.fileName"
                    type="button">!</button>
            </div>
        </div>

        <div class="form-group">
            <label for="permalink" class="form-label">
                Permalink
            </label>
            <div class="input-group">
                <input type="text" id="permalink" class="form-control"
                    data-bind="textInput: mediaItem.permalink, validationElement: mediaItem.permalink"
                    placeholder="http://www.site.com/" maxlength="2000" spellcheck="false" />
                <button class="btn btn-danger input-group-btn" data-bind="validationMessageToggle: mediaItem.permalink"
                    type="button">!</button>
            </div>
        </div>

        <!-- ko if: mediaItem.isReferenced -->
        <div class="form-group">
            <label for="downloadUrl" class="form-label">
                Reference URL
            </label>
            <div class="input-group">
                <input type="text" id="downloadUrl" class="form-control"
                    data-bind="textInput: mediaItem.downloadUrl, validationElement: mediaItem.downloadUrl"
                    placeholder="https://cdn.paperbits.io/images/logo.svg" maxlength="2000" spellcheck="false" />
                <button class="btn btn-danger input-group-btn"
                    data-bind="validationMessageToggle: mediaItem.downloadUrl" type="button">!</button>
            </div>
        </div>
        <div class="form-group">
            <label for="contentType" class="form-label">
                Content type
            </label>
            <dropdown id="contentType"
                params="{ options: contentTypes, value: mediaItem.contentType, optionsText: 'displayName', heading: 'Content type' }">
            </dropdown>
        </div>
        <!-- /ko -->

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

        <div class="form-group">
            <label for="keywords" class="form-label">
                Keywords
            </label>
            <input type="text" id="keywords" class="form-control" data-bind="textInput: mediaItem.keywords"
                maxlength="256" />
        </div>
    </div>

    <div class="flex-item btn-group">
        <!-- ko if: mediaItem.blobKey  -->
        <button class="btn btn-default" data-bind="click: openCropper">
            <i aria-hidden="true" class="paperbits-icon paperbits-crop"></i>
            Crop
        </button>
        <!-- /ko -->

        <button class="btn btn-default" data-bind="click: downloadMedia">
            <i aria-hidden="true" class="paperbits-icon paperbits-square-download"></i>
            Download
        </button>

        <button class="btn btn-default"
            data-bind="confirm: { message: 'Are you sure you want to delete this media?', onConfirm: deleteMedia }">
            <i aria-hidden="true" class="paperbits-icon paperbits-simple-remove"></i>
            Delete
        </button>
    </div>
</div>