<div class="uk-form-row">
    <label for="form-menu-title" class="uk-form-label">{{ 'Menu Title' | trans }}</label>
    <div class="uk-form-controls">
        <input id="form-menu-title" class="uk-form-width-large" type="text" name="title" v-model="node.title" v-validate:required>
        <div class="uk-form-help-block uk-text-danger" v-show="form.title.invalid">{{ 'Invalid name.' | trans }}</div>
    </div>
</div>

<div class="uk-form-row">
    <label for="form-slug" class="uk-form-label">{{ 'Slug' | trans }}</label>
    <div class="uk-form-controls">
        <input id="form-slug" class="uk-form-width-large" type="text" v-model="node.slug">
    </div>
</div>

<div class="uk-form-row">
    <label for="form-status" class="uk-form-label">{{ 'Status' | trans }}</label>
    <div class="uk-form-controls">
        <select id="form-status" class="uk-form-width-large" v-model="node.status">
            <option value="0">{{ 'Disabled' | trans }}</option>
            <option value="1">{{ 'Enabled' | trans }}</option>
        </select>
    </div>
</div>

<div class="uk-form-row">
    <span class="uk-form-label">{{ 'Restrict Access' | trans }}</span>
    <div class="uk-form-controls uk-form-controls-text">
        <p v-for="role in roles" class="uk-form-controls-condensed">
            <label><input type="checkbox" :value="role.id" v-model="node.roles" number> {{ role.name }}</label>
        </p>
    </div>
</div>

<div class="uk-form-row">
    <span class="uk-form-label">{{ 'Menu' | trans }}</span>
    <div class="uk-form-controls uk-form-controls-text">
        <label><input type="checkbox" value="center-content" v-model="node.data.menu_hide"> {{ 'Hide in menu' | trans }}</label>
    </div>
</div>
