/*
Panel containing control elements for managing sites and pages.

@copyright (c) Copyright 2017 Dorian Pula
@license AGPL v3
@author Dorian Pula [dorian.pula@amber-penguin-software.ca]
*/

import {h, Component} from 'preact';  /** @jsx h*/

import {observer} from 'mobx-observer';

import {siteStore} from '../stores';


@observer export class SiteEditor extends Component {

  render() {
    return (
      <form
        style={{
          display: 'grid',
          gridTemplateColumns: '1fr 4fr',
          gridTemplateRows: '1fr 1fr 1fr',
          marginTop: '10px',
          height: '150px',
        }}
      >
        <h2 style={{ gridColumn: 'span 2' }}>Site Editor</h2>
        <label
          htmlFor='name'
          style={{
            textAlign: 'right',
            verticalAlign: 'middle',
            marginRight: '10px'
          }}
        >Name</label>
        <input
          id='title'
          type='text'
          placeholder='Name'
          value={ siteStore.name } />
        <label
          htmlFor='favicon'
          style={{
            textAlign: 'right',
            verticalAlign: 'middle',
            marginRight: '10px',
            marginTop: '10px',
          }}
        >Favicon</label>
        <input
          id='favicon'
          style={{ marginTop: '10px'}}
          type='text'
          placeholder='favicon.ico'
          value={ siteStore.config.favicon } />
      </form>
    );
  }
}
