developer-console.html

<link rel="import" href="./bower_components/polymer/polymer.html">
<link rel="import" href="./bower_components/app-route/app-location.html">
<link rel="import" href="./bower_components/app-route/app-route.html">
<link rel="import" href="./bower_components/polymerfire/firebase-app.html">
<link rel="import" href="./bower_components/iron-selector/iron-selector.html">
<link rel="import" href="./bower_components/authentication-page/authentication-page.html">
<link rel="import" href="./bower_components/template-creator/template-creator.html">
<link rel="import" href="./bower_components/component-page/component-page.html">
<link rel="import" href="./bower_components/page-links/page-links.html">
<link rel="import" href="./bower_components/locales-page/locales-page.html">
<link rel="import" href="./bower_components/page-manager/page-manager.html">
<link rel="import" href="./bower_components/template-manager/template-manager.html">
<link rel="import" href="./bower_components/page-editor/page-editor.html">
<link rel="import" href="./bower_components/approvals-page/approvals-page.html">

<dom-module id="developer-console">
    <template>
        <style>
            :host {
                font-family: 'Roboto Condensed', sans-serif;
            }
        </style>

        <firebase-app
            auth-domain="__YOUR_AUTH_DOMAIN__"
            database-url="__YOUR_DATABASE_URL__"
            api-key="__YOUR_API_KEY__">
        </firebase-app>

        <!-- app-location binds to the app's URL -->
        <app-location route="{{route}}" use-hash-as-path></app-location>

        <!-- this app-route manages the top-level routes -->
        <app-route
            route="{{route}}"
            pattern="/login"
            active="{{authenticationActive}}"></app-route>

        <app-route
            route="{{route}}"
            pattern="/templates/list"
            active="{{templateActive}}"></app-route>

        <app-route
            route="{{route}}"
            pattern="/templates/edit"
            active="{{templateCreatorActive}}"
            tail="{{subroute}}"></app-route>

        <app-route
            route="{{route}}"
            pattern="/components"
            active="{{componentActive}}"></app-route>

        <app-route
            route="{{route}}"
            pattern="/locales"
            active="{{localesActive}}"></app-route>

        <app-route
            route="{{route}}"
            pattern="/pages/list"
            active="{{pageManagerActive}}"></app-route>

        <app-route
            route="{{route}}"
            pattern="/pages/:locale/edit/:name"
            data="{{routeData}}"
            active="{{pageEditorActive}}"></app-route>

        <app-route
            route="{{route}}"
            pattern="/approvals"
            tail="{{subroute}}"
            active="{{approvalsPageActive}}"></app-route>

        <main>
            <authentication-page
                active$="{{authenticationActive}}"
                route="{{route}}"></authentication-page>
            <template-manager
                active$="{{templateActive}}"
                route="{{route}}"></template-manager>
            <template-creator
                active$="{{templateCreatorActive}}"
                route="{{route}}"
                subroute$="{{subroute.path}}"></template-creator>
            <component-page
                active$="{{componentActive}}"
                route="{{route}}"></component-page>
            <locales-page
                active$="{{localesActive}}"
                route="{{route}}"></locales-page>
            <page-manager
                active$="{{pageManagerActive}}"
                route="{{route}}"></page-manager>
            <page-editor
                active$="{{pageEditorActive}}"
                route="{{route}}"
                routedata$="{{routeData}}"></page-editor>
            <approvals-page
                active$="{{approvalsPageActive}}"
                tail="{{subroute}}"
                route="{{route}}"></approvals-page>
        </main>

        <template is="dom-if" if="[[!authenticationActive]]">
            <page-links></page-links>
        </template>
    </template>
    <script>
        Polymer({
            is: 'developer-console',

            properties: {
                authenticationActive: {
                    type: Boolean,
                    notify: true
                }
            },

            attached: function() {
                if(!this.route.path) {
                    this.set('route.path', '/login')
                }
            }
        });
    </script>
</dom-module>