{#-
       Licensed to the Apache Software Foundation (ASF) under one
       or more contributor license agreements.  See the NOTICE file
       distributed with this work for additional information
       regarding copyright ownership.  The ASF licenses this file
       to you under the Apache License, Version 2.0 (the
       "License"); you may not use this file except in compliance
       with the License.  You may obtain a copy of the License at

         http://www.apache.org/licenses/LICENSE-2.0

       Unless required by applicable law or agreed to in writing,
       software distributed under the License is distributed on an
       "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
       KIND, either express or implied.  See the License for the
       specific language governing permissions and limitations
       under the License.
-#}
{% extends g.theme.master %}

{% do g.register_forge_js('js/hopscotch.min.js', location='body_js') %}
{% do g.register_forge_css('css/hopscotch.min.css', compress=False) %} {# compress will also serve from a different location, breaking image refs #}

{% block title %}{{c.project.name}} / Admin Welcome{% endblock %}

{% block header %}Welcome to your {{config.site_name}} project!<span class="title-end"></span>{% endblock %}

{% set tour = {
    "id": "admin-welcome",
    "showPrevButton": false,
    "steps": [
        {
            "title": "Describe your project",
            "content": "Enter your project description, then upload screenshots if you've got them, and categorize your project.  This helps people know what your project is all about.",
            "target": ".admin-nav-metadata",
            "placement": "right",
            "yOffset": -17,
        },
        {
            "title": "Add tools",
            "content": "Add more code repositories, ticket trackers, wikis, links, whatever your project needs!",
            "target": 'add-tool-container',
            "__comment": "if many tools are installed, this target could be on the second row, but should be rare, particularly with brand new projects",
            "placement": "bottom",
            "xOffset": -180,
            "arrowOffset": 200,
        },
        {
            "title": "Customize",
            "content": "Rename and change settings for your tools.  Remove any you don't need.",
            "target": "toggle-admin-btn",
            "placement": "bottom",
            "xOffset": -225,
            "arrowOffset": 220,
        },
        {
            "title": "Add users",
            "content": "Add other developers to your project.",
            "target": ".admin-nav-user-perms",
            "placement": "right",
            "yOffset": -17,
        },
        {
            "title": "Start coding",
            "content": "Commit your code to your repo.  Or, if you have code somewhere else, <a href='ext/import/'>import it</a> or add link to it (add an 'External Link' tool).",
            "target": ".tool-git-32,.tool-hg-32,.tool-svn-32",
            "placement": "bottom",
            "xOffset": -17,
        },
    ]
} %}
{% if 'first-visit' in request.params %}
    {% do tour['steps'].insert(0, {
        "title": "Welcome to your new project!",
        "content": "Here's a quick tour to show you around.",
        "target": "h2.title .title-end",
        "placement": "right",
        "yOffset": -26,
    }) %}
{% endif %}


{% block content %}
    <p>This is the Admin area of your project, where you can set your project details, permissions, options and more.
        Your project has many tools available in the top menu, each with its own customization and settings.</p>
    <p class="show-for-large">Here's a quick tour of a few important things to get started:</p>

    {% for step in tour.steps %}
    <div class="tour-step-info show-for-large">
        <h2>{{ step.title }}</h2>
        <p>{{ step.content|safe }}
        </p>
        <div class="hopscotch-bubble not-really-hopscotch-bubble">
            <button class="tour-show hopscotch-nav-button next" data-tour-id="{{ loop.index0 }}">Show Me</button>
        </div>
    </div>
    {% endfor %}
{% endblock %}

{% block extra_css %}
<style type="text/css">
    div.hopscotch-bubble.not-really-hopscotch-bubble {
        border: none;
        position: initial;
    }
    .tour-step-info {
        margin-bottom: 20px;
    }
    .tour-step-info h2 {
        padding-bottom: 0;
    }
    .tour-step-info p {
        padding-bottom: 8px;
    }
    .tour-step-info button {
        float: none;
    }
</style>
{% endblock %}

{% block extra_js %}
<script>
$(function() {
    var tour = {{ h.escape_json(tour)|safe }};
    tour.onError = function() {
        var step = hopscotch.getCurrStepNum();
        console.warn('Error on tour step #', step, tour.steps[step]);
    };
    $('.tour-show').click(function(){
        var step = $(this).data('tour-id');
        hopscotch.startTour(tour, step);
    });
    {% if 'first-visit' in request.params %}
        hopscotch.startTour(tour);
    {% endif %}
});
</script>
{% endblock %}