extends template

block pageSpecifics
    script(type='text/javascript' src='/javascripts/cmspagecontroller.js')

block cmsPage
    -var eleCount = managedElements.length || 0
    -var i = 0
    -var headers
    -var stxValues
    -var displayHeaders
    -var empty
    script(type='text/javascript').
        var j = !{JSON.stringify(managedElements)};
        console.log(j);
        CurrentElements(j);

    #control-panel
        //- a#indicator(href='javascript:void(0)' onclick='ExpandPanel()')
        //-     h2 <
        //- #expander
        //-     a.side-link(href='javascript:void(0)' onclick='ExpandPanel()')
        //-     nav#options
        //-         ul
        //-             li#control-panel-add-control
        //-                 a(href='javascript:void(0)' onclick='SwitchToTitleInput("#control-panel-add-control")')
        //-                     h3 +
        //-             li
        //-                 a(href='#') 2
        //-             li
        //-                 a(href='#') 3
        //-             li
        //-                 a(href='#') 4
        //-             li
        //-                 a(href='#') 5
        //-             li
        //-                 a(href='#') 6
        //-             li
        //-                 a(href='#') 7

    ul#element-nav
        if managedElements != 0
            each val, index in managedElements
                -var element = managedElements[index];
                -empty = element.stx_empty || element[0].stx_empty;
                if empty
                    -headers = Object.getOwnPropertyNames(element);
                    -stxValues = {'title' : element.stx_element, 'position' : element.stx_position};
                else
                    -headers = Object.getOwnPropertyNames(element[0]);
                    -stxValues = {'title' : element[0].stx_element, 'position' : element[0].stx_position};
                -displayHeaders = [];
                each val, index in headers
                    -var test = val.split('_');
                    -var header = val;
                    -if(test.length > 1) header = test[1];
                    -displayHeaders.push(header);
                    -if (test[0] == 'stx') {
                        -delete displayHeaders[index];
                        -delete headers[index];}
                li
                    a(href='#element-' + stxValues.title)
                        h3 #{stxValues.title}
        li#nav-add-control
            a(href='javascript:void(0)' onclick='SwitchToTitleInput("#nav-add-control")')
                h3 +

    section#elements-holder
        if managedElements != 0
            each val, index in managedElements
                -var element = managedElements[index];
                article.element(id='element-' + stxValues.title)
                    h2#element-header #{stxValues.title}
                        a#remove-element(href='./modify/delete/' + stxValues.title) x
                    -empty = element.stx_empty || element[0].stx_empty;
                    if !empty
                        each val, index in element
                            form(action='./modify/update/' + element[index].stx_unique enctype='multipart/form-data' method='post')
                                table
                                    -if (index == 0)
                                        tr
                                            each header, pos in headers
                                                if header
                                                    -var special = header.split('_');
                                                    -var inpType = 'text';
                                                    -if(special.length > 1) inpType = special[0];
                                                    -if (inpType != 'file' && inpType != 'stx')
                                                        th #{displayHeaders[pos]}
                                    tr
                                        each header in headers
                                            if header
                                                -var special = header.split('_');
                                                -var inpType = 'text';
                                                -var inpVal = "";
                                                -if(special.length > 1)
                                                    -inpType = special[0];
                                                    -inpVal = element[index][header];
                                                -if (inpType != 'file' && inpType != 'stx')
                                                    td
                                                        input(type=inpType name=header placeholder=element[index][header] value=inpVal)
                                        
                                        td.element-control
                                            a(href='./modify/remove?element=' + stxValues.title + '&target=' + element[index].name) X
                                        td.element-control
                                            input(type='submit' value='Y')
                    
            form.appendor(action='./modify/add/' + stxValues.title + '/' + stxValues.position  enctype='multipart/form-data' method='post')
                table
                    tr
                        each val, pos in headers
                            if val
                                -var special = val.split('_');
                                -var inpType = 'text';
                                -if(special.length > 1) inpType = special[0];
                                -if (inpType != 'stx')
                                    th #{headers[pos]}
                    tr
                        each val in headers
                            if val
                                td
                                    -var special = val.split('_');
                                    -var inpType = 'text';
                                    -if(special.length > 1) inpType = special[0];
                                    -if (inpType != 'stx')
                                        input(type=inpType name=val)
                        td
                            input(type='submit' value='+')
        else
            article#guide
                h1 Add Your First Element
                h2 Start by clicking the '+'