extends frame
block main-content
  // move this to backend
  -var post_title = ''
  -var post_plaintext = ''
  -var post_feature = 'null'
  -var post_tags = ''
  -var post_id = ''
  -var post_date = date
  -var post_status = ['false', 'false', 'false',]

  if(edit)
    -post_title = page.title
    -post_plaintext = page.plaintext
    -post_feature = page.feature
    -post_tags = page.tags
    -post_date = date
    -post_status = status

  #post-edit-index(data-index=id)
        #post-edit-index-wrapper
            //h2 EDIT 
                =post_title
            #post-feature
                //label FEATURE IMAGE
                if(post_feature == 'null')
                    #featured-image-drop
                        | DRAG AND DROP IMAGE OR  
                        label(for="featured-image-upload")  CLICK TO CHOOSE    

                else
                    #featured-new-image-btn
                        button#new-feature-upload
                            svg#new-feature-upload(viewBox="0 0 20 20" class="icons")
                                use(xlink:href='/assets/images/global/sprite.svg#entypo-image-inverted')
                    #featured-image-drop
                            img(src=post_feature)
            #post-header.columns
                #post-title.column
                    textarea(id="post_title" type='text', name='post_title' class='post-edit', placeholder='title', required, autofocus)
                        =post_title
                    #calendar-icon
                        svg(viewBox="0 0 20 20" class="icons")
                            use(xlink:href='/assets/images/global/sprite.svg#entypo-calendar')
                    input(id="post-date" type="text" value=post_date)
                    #post-options
                        button#option-page.option-inactive.post-option-btn(data-active= status[0])
                            svg#option-page-icon(viewBox="0 0 20 20" class="icons")
                                use#option-page-icon(xlink:href='/assets/images/global/sprite.svg#entypo-pin')
                        button#option-feature.option-inactive.post-option-btn(data-active= status[1])
                            svg#option-feature-icon(viewBox="0 0 20 20" class="icons")
                                use#option-feature-icon(xlink:href='/assets/images/global/sprite.svg#entypo-star')
                        button#option-published.option-inactive.post-option-btn(data-active= status[2])
                            svg#option-published-icon(viewBox="0 0 20 20" class="icons")
                                use#option-published-icon(xlink:href='/assets/images/global/sprite.svg#entypo-globe')
                        button#option-preview.option-inactive(data-active="false")
                            svg#option-preview-icon(viewBox="0 0 20 20" class="icons")
                                use#option-preview-icon(xlink:href='/assets/images/global/sprite.svg#entypo-eye')
                #post-meta.column
                    textarea(id='post_tags' type='text', name='post_tags' class='form-control', placeholder='tags [comma seperated]', autofocus)
                        =post_tags
                    include partials/editor
                    input(id="featured-image-upload" type="file" name="featured-image-upload")
                    input(id="post-image-upload" type="file" name="post-image-upload")
            #edit-post
               #edit-post-wrapper
                    pre
                        code#edit-post-text(contenteditable="true") !{colored}