WEBD-325-45/week-04/project/templates/admin/item.twig

111 lines
5.7 KiB
Twig

{% extends "index.twig" %}
{% block title %}Edit Item{% endblock %}
{% block headJavaScriptLinks %}
<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/ckeditor.js"></script>
{% endblock %}
{% block content %}
<div class="uk-container uk-margin">
{{ block("messages_queue", "message_queue.twig") }}
<form class="uk-form-stacked" action="{{ route() }}index.php/item{{ form.post_key|default('') }}" method="post">
<div class="uk-button-group uk-width-1-1 uk-margin">
<input type="submit" class="uk-button uk-button-primary uk-width-1-2" value="Save"/>
<a href="{{ route() }}index.php/items" type="button" class="uk-button uk-button-danger uk-width-1-2">Close</a>
</div>
<div>
<label class="uk-form-label">Title</label>
<div class="uk-form-controls">
<input name="title" class="uk-input uk-width-1-1" type="text" placeholder="Add the item title here..." value="{{ form.title|default('') }}">
</div>
</div>
<ul class="uk-flex-center" uk-switcher="connect: .switcher-container; animation: uk-animation-slide-left-medium, uk-animation-slide-right-medium" uk-tab>
<li class="uk-active"><a href="#">Details</a></li>
<li><a href="#">Meta Details</a></li>
<li><a href="#">Publish</a></li>
</ul>
<ul class="uk-switcher switcher-container uk-margin">
<li>
<div class="uk-margin">
<label class="uk-form-label">Content</label>
<div class="uk-form-controls">
<textarea id="item-text" name="fulltext" class="uk-textarea" type="text" placeholder="Enter your item details here..." >{{ form.fulltext|default('') }}</textarea>
</div>
</div>
</li>
<li>
<div class="uk-child-width-1-2 uk-margin" uk-grid>
<div>
<label class="uk-form-label">Metakey</label>
<div class="uk-form-controls">
<input name="metakey" class="uk-input uk-width-1-1" type="text" value="{{ form.metakey|default('') }}">
</div>
</div>
<div>
<label class="uk-form-label">Metadesc</label>
<div class="uk-form-controls">
<input name="metadesc" class="uk-input uk-width-1-1" type="text" value="{{ form.metadesc|default('') }}">
</div>
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label">metadata</label>
<div class="uk-form-controls">
<textarea name="metadata" class="uk-textarea" type="text" rows="10">{{ form.metadata|default('') }}</textarea>
</div>
</div>
</li>
<li>
<div class="uk-child-width-1-2 uk-margin" uk-grid>
<div>
<label class="uk-form-label">Created by Alias</label>
<div class="uk-form-controls">
<input name="created_by_alias" class="uk-input uk-width-1-1" type="text" value="{{ form.created_by_alias|default('') }}"/>
</div>
</div>
<div>
<label class="uk-form-label">Status</label>
<div class="uk-form-controls">
<select name="state" class="uk-select">
<option value="1">Published</option>
<option value="2" {% if form.state == 2 %}selected{% endif %}>Archived</option>
<option value="-1" {% if form.state == -1 %}selected{% endif %}>Trashed</option>
<option value="" {% if form.state == 0 %}selected{% endif %}>Unpublished</option>
</select>
</div>
</div>
<div>
<label class="uk-form-label">Published Up</label>
<div class="uk-form-controls">
<input name="publish_up" class="uk-input uk-width-1-1" type="datetime-local"
value="{{ form.publish_up|default(form.today_date|default('')) }}"/>
</div>
</div>
<div>
<label class="uk-form-label">Published Down</label>
<div class="uk-form-controls">
<input name="publish_down" class="uk-input uk-width-1-1" type="datetime-local"
value="{{ form.publish_down|default('') }}"/>
</div>
</div>
</div>
</li>
</ul>
<input type="hidden" name="item_id" value="{{ form.id|default(0) }}">
<input type="hidden" name="{{ token() }}" value="1">
</form>
</div>
<script>
ClassicEditor.create(document.querySelector(`#item-text`), {
toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
heading: {
options: [
{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
]
}
}).catch(error => { console.error(error);});
</script>
{% endblock %}