{% extends "page.html" %}

{% block main %}
<div id="main" class="container">
    <div class="row">
        <div class="col-lg-10 col-lg-offset-1">

            <h2>
                {% if dashboard %}
                Editing dashboard {{ dashboard.urlname }}
                {% else %}
                Create new dashboard
                {% endif %}
            </h2>
            

            <form method="post" class="dashboard-edit-form">

                <p><label for="name">Dashboard name:</label></p>
    
                <p><input type="text" name="name" value="{{ dashboard_name | escape }}" id="dashboard-name" /></p>
    
                {% if errors.name %}
    
                <p class="error">{{ errors.name | escape }}</p>
    
                {% endif %}


                <p><label for="name">Description:</label></p>
    
                <p><textarea name="description" id="dashboard-description">{{ dashboard_description | escape }}</textarea></p>
    
                {% if errors.description %}
    
                <p class="error">{{ errors.description | escape }}</p>
    
                {% endif %}


                <h3>User Permissions</h3>

                <div id="tab-user-permissions-container" class="dashboard-tab-container">
                    <ul class="dashboard-selectable-tabs">
                        <li id="tab-selector-anyusers"><a href="#tab-anyusers" data-source-value="anyusers">All Users</a></li>
                        <li id="tab-selector-selectedusers"><a href="#tab-selectedusers" data-source-value="selectedusers">Selected Users</a></li>
                    </ul>

                    <div id="tab-anyusers" style="display: none">
                    </div>

                    <div id="tab-selectedusers" style="display: none">

                        <select multiple name="selected_users[]" id="selected_users" class="selectator" style="width: 300px">

                        {% for visitor_tuple in all_users_tuples %}

                            <option value="{{ visitor_tuple[1] | escape }}" {%if visitor_tuple[0] %}selected{% endif %}>{{ visitor_tuple[1] | escape }}</option>

                        {% endfor %}

                        </select>

                    </div>

                    <input type="hidden" name="user_permissions" id="user_permissions" value="{{ user_permissions }}" />

                </div>

                {% if errors.user_permissions %}
    
                <p class="error">{{ errors.user_permissions | escape }}</p>
    
                {% endif %}


                {% if show_source_git %}

                <h3>File source</h3>

                <div id="tab-source-container" class="dashboard-tab-container">
                    <ul class="dashboard-selectable-tabs">
                        <li id="tab-selector-jupytertree"><a href="#tab-jupytertree" data-source-value="jupytertree">Jupyter Tree</a></li>
                        <li id="tab-selector-gitrepo"><a href="#tab-gitrepo" data-source-value="gitrepo">Git Repo</a></li>
                    </ul>

                    <div id="tab-jupytertree" style="display: none">
                    </div>

                    <div id="tab-gitrepo" style="display: none">

                        <p><label for="source_type_git">Git Repo URL</label></p>

                        <p><input type="text" name="git_repo" id="git_repo" 
                                                        value="{{ git_repo | escape }}" /></p>

                        <p><label for="source_type_git_branch">Git Repo Branch</label></p>

                        <p><input type="text" name="git_repo_branch" id="git_repo_branch" 
                                                        value="{{ git_repo_branch | escape }}" /></p>

                        {% if errors.git_repo %}
            
                        <p class="error">{{ errors.git_repo | escape }}</p>
            
                        {% endif %}

                    </div>

                    <input type="hidden" name="source_type" id="source_type" value="{{ source_type }}" />

                </div>

                {% endif %}


                <h3>Details</h3>

                <p><label for="presentation_type">Framework:</label>
                    <select name="presentation_type" id="presentation_type">
                        {% for pt in presentation_types %}
                        <option value="{{pt}}" {% if dashboard_presentation_type == pt %}selected{% endif %}>{{pt}}</option>
                        {% endfor %}
                    </select>
                </p>

                {% if errors.presentation_type %}
    
                <p class="error">{{ errors.presentation_type | escape }}</p>
    
                {% endif %}


                {% if all_conda_envs or allow_custom_conda_env %}

                    <p><label for="conda_env">Conda Env:</label>
                        {% if allow_custom_conda_env %}
                            <input type="text" name="conda_env" value="{{ conda_env | escape }}" 
                                {% if all_conda_envs %} list="conda_env_list" {% endif %}
                            />
                        {% endif %}
                        {% if all_conda_envs %}
                            <{% if allow_custom_conda_env %}datalist{% else %}select name="conda_env"{% endif %} id="conda_env_list">
                                {% for ce in all_conda_envs %}
                                    <option value="{{ce}}" {% if conda_env == ce and not allow_custom_conda_env %}selected{% endif %}>{{ce | default('None / Default', true)}}</option>
                                {% endfor %}
                            </{% if allow_custom_conda_env %}datalist{% else %}select{% endif %}>
                        {% endif %}
                    </p>

                {% endif %}

                {% if errors.conda_env %}
    
                <p class="error">{{ errors.conda_env | escape }}</p>
    
                {% endif %}

                <p><label for="start_path">Relative Path to a file or folder: </label></p>
                
    
                <p><input type="text" name="start_path" value="{{ dashboard_start_path | escape }}" id="dashboard-start-path" /></p>
                <p> <i>Relative to your Jupyter tree or Git root</i></p>
    
                {% if errors.start_path %}
    
                <p class="error">{{ errors.start_path | escape }}</p>
    
                {% endif %}
               
                      
                {% if errors.all %}
    
                <p class="error">{{ errors.all | escape }}</p>
    
                {% endif %}

                <div class="dashboard-buttons">

                    <input type="submit" value="Save" id="dashboard-save" /> or <a href='{{ base_url }}dashboards'>Cancel</a>

                </div>

                </form>


        </div>
    </div>
    <a href="https://cdsdashboards.readthedocs.io/en/stable/chapters/userguide/userguide.html" 
    id="help-floater" target="_blank" title="View ContainDS Dashboards user guide">Help</a>
</div>
{% endblock main %}

{% block script %}
{{ super () }}
<link rel="stylesheet" href="{{ base_url }}dashboards-static/components/selectator/fm.selectator.jquery.css"/>
<script type="text/javascript">
require(
    [
        "jquery", 
        "{{ base_url }}dashboards-static/components/selectator/fm.selectator.jquery.js", 
        "{{ base_url }}dashboards-static/components/jquery.easytabs.js"
    ], 
    function($, selectator, easytabs) {
        "use strict";
    
        $(document).ready(function() {

            $('#tab-source-container').easytabs({
                    updateHash: false,
                    animate: false,
                    defaultTab: '#tab-selector-{{ source_type }}'
                }).on(
                'easytabs:after', function(evt, tab, panel, data) {
                    $('#source_type').val(tab.data('source-value'));
                }
            ); 

            $('#tab-user-permissions-container').easytabs({
                    updateHash: false,
                    animate: false,
                    defaultTab: '#tab-selector-{{ user_permissions }}'
                }).on(
                'easytabs:after', function(evt, tab, panel, data) {
                    $('#user_permissions').val(tab.data('source-value'));
                }
            ); 
        });

        $('#selected_users').selectator({
            showAllOptionsOnFocus: true
        });

    });

</script>
{% endblock script %}
