let m = require('mithril')
let category = require('../models/category')
let nav = require('./nav')
let _ = require('lodash')
let Loading = require('./Loading')

var editCategory = {
    oninit: function(vnode) {
        category.loadCurrent(vnode.attrs.id)
    },
    view: function() {
        return m('main.documentation', m('section', [
            m('h1', 'Kategori'),
            category.loading ? m(Loading) :
            m('.flex.two-600.full.grow', [
                m('div', m('form', {
                    onsubmit: function(e) {
                        e.preventDefault()
                        category.save()
                    }
                }, [
                    m('h2', 'Ubah Kategori'),
                    m('.flex.three-600.two.grow', [
                        m('.third-600.full', m('label', {for: 'category'}, 'Nama')),
                        m('.two-third-600.full', m('input', {
                            type: 'text',
                            name: 'category',
                            autocomplete: 'off',
                            oninput: m.withAttr('value', function(value) {
                                category.current.category = value
                            }),
                            value: category.current.category
                        })),
                        m('.third-600.full', m('label', {for: 'background'}, 'Background')),
                        m('.two-third-600.full', m('input', {
                            type: 'color',
                            name: 'background',
                            oninput: m.withAttr('value', function(value) {
                                category.current.background = value
                            }),
                            value: category.current.background
                        })),
                        m('.third-600.full', m('label', {for: 'foreground'}, 'Teks')),
                        m('.two-third-600.full', m('input', {
                            type: 'color',
                            name: 'foreground',
                            oninput: m.withAttr('value', function(value) {
                                category.current.foreground = value
                            }),
                            value: category.current.foreground
                        })),
                        m('button.pseudo.full', {
                            type: 'submit'
                        }, [
                            m('i.fa.fa-edit.fa-fw', {
                                'aria-hidden': 'true'
                            }),
                            m('span', 'Ubah')
                        ])
                    ])
                ]))
            ])
        ]))
    }
}

module.exports = editCategory