<script>
    function Intro() {
		let intro = introJs();
		intro.setOptions({
			steps: [
				{
					element: document.querySelector('#body'),
                    title: "Welcome to Roxy-WI!",
					intro: "We're going to explain some basics...",
				},
				{
					element: document.querySelector('.overview-link'),
					intro: "You're here now",
                    position: 'right'
				},
				{
					element: document.querySelector('#overview-roxy-wi'),
                    title: "Dashboard #1",
					intro: "List of your servers and statuses of services which Roxy-WI manages",
				},
				{
					element: document.querySelector('#overview-load'),
                    title: "Dashboard #2",
					intro: "Roxy-WI server load",
				},
				{
					element: document.querySelector('#overview-services'),
                    title: "Dashboard #3",
					intro: "Roxy-WI services status",
				},
                {% if role == 1 %}
				{
					element: document.querySelector('#overview-users'),
                    title: "Dashboard #4",
					intro: "Users info - hold your cursor on a user's name to see more details",
				},
				{
					element: document.querySelector('#overview-groups'),
                    title: "Dashboard #5",
					intro: "Group list",
				},
				{
					element: document.querySelector('#overview-roles'),
                    title: "Dashboard #6",
					intro: "Roles description",
				},
                {% endif %}
                {% if role < 3 %}
                    {% if role > 1 %}
                        {% set board_id = 4 %}
                    {% else %}
                        {% set board_id = 7 %}
                    {% endif %}
				{
					element: document.querySelector('#overview-logs'),
                    title: "Dashboard #{{ board_id }}",
					intro: "Last log entries",
				},
                {% endif %}
                {% if role == 1 %}
				{
					element: document.querySelector('#overview-subs'),
                    title: "Dashboard #8",
					intro: "Subscription info",
				},
                {% endif %}
				{
					element: document.querySelector('#version'),
					intro: "Your Roxy-WI version",
				},
				{
					element: document.querySelector('#useful-links'),
					intro: "Useful links",
				},
				{
					element: document.querySelector('#show-user-settings-button'),
					intro: "Profile settings",
				},
				{
					element: document.querySelector('.guid_me'),
					intro: "Guide mode button",
				},
				{
					element: document.querySelector('.menu'),
					intro: "9 more sections left to discover. Meet you there :)",
				}
			]
		});
		return intro;
	}
</script>
