{{ define "content" }}
<script src="/assets/pages/favorites/js/favorites.js"></script>
<link href="/assets/pages/favorites/css/favorites.css" rel="stylesheet">
<link href="/static/css/pages/panel.css" rel="stylesheet">
<script src="/static/js/splitPane.js"></script>
<link href="/static/css/common/splitpane.css" rel="stylesheet">

<div class="split-container">
    {{/* Left Pane */}}
    <div id="left-pane" class="left-pane splitBorder">
        {{ template "favorites-left-pane" . }}
    </div>

    <div id="verticalSplitterHandler" class="vertical-split-handle"></div>

    {{/* Right Pane */}}
    <div id="right-pane" class="right-pane tab alias-editor-style">
        {{ template "favorites-right-pane" . }}
    </div>
</div>

{{ template "favorites-modals" . }}
{{ template "renameModal" . }}
{{ template "removeModal" . }}
{{ template "progressbar" . }}
{{ template "copyPaste" . }}
{{ template "logicalImportExport" . }}
{{ template "uploadFile" . }}

<script>
    document.addEventListener('DOMContentLoaded', function() {
        initializeSplitPaneBar(
            '{{ "verticalSplitterHandler" }}',
            '{{ "left-pane" }}',
            '{{ "right-pane" }}',
            '{{ "horizontal"}}',
            {
                'firstPanePercent': '{{  50 }}',
            }
        );
    });
</script>

{{ end }}