title: $:/community/recipes/ui/ViewTemplate/recipe-body

\whitespace trim
<$let stepState={{{ [[$:/state/community/recipes/step/]addsuffix<currentTiddler>] }}}
     ingrState={{{ [[$:/state/community/recipes/ingr/]addsuffix<currentTiddler>] }}}
     ingreds={{{ [<currentTiddler>get[text]splitregexp[!! Ingredients]last[]splitregexp[!! ]first[]] }}}
     stepCount={{{ [<currentTiddler>get[text]splitregexp[!! Steps]last[]splitregexp[!! ]first[]splitregexp[\r?\n]regexp[^# ]removeprefix[# ]trim[]count[]] }}}
     aboutContent={{{ [<currentTiddler>get[text]splitregexp[!! About]last[]splitregexp[!! ]first[]trim[]] }}}
     photoTiddler={{{ [<currentTiddler>get[photo]] }}}
     cookMode={{{ [[$:/state/community/recipes/cooking-mode]get[text]] }}}>
<$set name="stepIdx" tiddler=<<stepState>> field="text" emptyValue="1">
<$set name="ingrVisible" tiddler=<<ingrState>> field="text" emptyValue="hide">

<%if [<aboutContent>!is[blank]] [<photoTiddler>!is[blank]] %>
<div class="tc-recipe-about">
<%if [<photoTiddler>!is[blank]] %>
<div class="tc-recipe-photo">
<$transclude $tiddler=<<photoTiddler>> $mode="block"/>
<$transclude $variable="photo-caption" photo=<<photoTiddler>>/>
</div>
<% endif %>
<%if [<aboutContent>!is[blank]] %>
<$transclude $variable="aboutContent" $mode="block"/>
<% endif %>
</div>
<% endif %>

<div class="tc-recipe-split">
<div class={{{ [<ingrVisible>match[show]then[tc-recipe-split-left tc-recipe-ingr-panel tc-recipe-ingr-visible]else[tc-recipe-split-left tc-recipe-ingr-panel]] }}}>
<strong><<t RecipeBody/Ingredients>></strong>
<$transclude $variable="ingreds" $mode="block"/>
</div>
<div class="tc-recipe-split-right">
<strong><<t RecipeBody/Steps>></strong>
<%if [<cookMode>!is[blank]] %>
<$list filter="[<currentTiddler>get[text]splitregexp[!! Steps]last[]splitregexp[!! ]first[]splitregexp[\r?\n]regexp[^# ]removeprefix[# ]trim[]]" variable="stepText" counter="stepNum">
<$button class={{{ [<stepNum>match<stepIdx>then[tc-step tc-step-active tc-btn-invisible]else[tc-step tc-btn-invisible]] }}}>
<$action-setfield $tiddler=<<stepState>> text=<<stepNum>>/>
<span class="tc-step-num"><<stepNum>>.</span>&#32;<$transclude $variable="stepText" $mode="inline"/>
</$button>
</$list>
<% else %>
<ol class="tc-recipe-steps">
<$list filter="[<currentTiddler>get[text]splitregexp[!! Steps]last[]splitregexp[!! ]first[]splitregexp[\r?\n]regexp[^# ]removeprefix[# ]trim[]]" variable="stepText">
<li><$transclude $variable="stepText" $mode="inline"/></li>
</$list>
</ol>
<% endif %>
</div>
</div>

<%if [<cookMode>!is[blank]] %>
<div class="tc-stepview-nav">
<%if [<stepIdx>!match[1]] %>
<$button>
<$action-setfield $tiddler=<<stepState>> text={{{ [<stepIdx>subtract[1]] }}}/>
<<t RecipeBody/StepNav/Previous>>
</$button>
<% else %>
<span></span>
<% endif %>
<$button class="tc-btn-invisible tc-recipe-ingr-toggle">
<$action-setfield $tiddler=<<ingrState>> text={{{ [<ingrVisible>match[show]then[hide]else[show]] }}}/>
<%if [<ingrVisible>match[show]] %>▴&#32;<<t RecipeBody/IngredientsToggle>><% else %>▾&#32;<<t RecipeBody/IngredientsToggle>><% endif %>
</$button>
<%if [<stepIdx>!match<stepCount>] %>
<$button>
<$action-setfield $tiddler=<<stepState>> text={{{ [<stepIdx>add[1]] }}}/>
<<t RecipeBody/StepNav/Next>>
</$button>
<% else %>
<span></span>
<% endif %>
</div>
<% endif %>

</$set>
</$set>
</$let>
