title: $:/plugins/tiddlywiki/tour/panel
tags: $:/tags/PageTemplate

\define tour-buttons()
\define tv-action-refresh-policy() always
<div class="tc-tour-panel-navigation">
<$list filter="[function[tour-is-not-first-step]]" variable="ignore">
<$button class="tc-btn-big-green" style="background-color: red;">
<<tour-previous-step>>
back
</$button>
</$list>
<$button class="tc-btn-big-green" style="background-color: purple;">
<<tour-next-step>>
next
</$button>
</div>
\end

<$list filter="[{$:/config/ShowTour}!is[blank]else[show]match[show]]" variable="ignore">
<div class={{{ tc-tour-panel [{$:/state/tour/step}get[display-mode]else[normal]addprefix[tc-tour-panel-]] +[join[ ]] }}}>
<$image class="tc-tour-panel-banner-image" source={{{ [{$:/config/CurrentTour}get[logo]] }}}/>
<div class="tc-tour-panel-inner">
<div class="tc-tiddler-controls tc-tour-panel-controls">
<$button set="$:/config/ShowTour" setTo="no" class="tc-btn-invisible">{{$:/core/images/close-button}}</$button> <span class="tc-tour-panel-controls-icon">{{$:/plugins/tiddlywiki/tour/tour-button-icon}}</span> ''Tour'': 
<$transclude $tiddler={{$:/config/CurrentTour}} $field="description">
<$text text={{$:/config/CurrentTour}}/>
</$transclude>
</div>
<$transclude tiddler={{$:/state/tour/step}} mode="block"/>
<$list filter="[{$:/state/tour/step}has[selector]]" variable="ignore">
<$button class="tc-btn-big-green" style="background-color: green;">
<$action-sendmessage $message="tm-spotlight-element" selector={{{ [{$:/state/tour/step}get[selector]] }}} selector-fallback-1={{{ [{$:/state/tour/step}get[selector-fallback-1]] }}} selector-fallback-2={{{ [{$:/state/tour/step}get[selector-fallback-2]] }}}/>
show me a hint
</$button>
</$list>
</div>
</div>
</$list>