title: $:/core/ui/EditTemplate/tags
tags: $:/tags/EditTemplate

\define lingo-base() $:/language/EditTemplate/
\define tag-styles()
background-color:$(backgroundColor)$;
\end
<div class="tc-edit-tags">
<$fieldmangler>
<$list filter="[all[current]tags[]sort[title]]" storyview="pop"><$set name="backgroundColor" value={{!!color}}><span style=<<tag-styles>> class="tc-tag-label">
<$view field="title" format="text" />
<$button message="tm-remove-tag" param={{!!title}} class="tc-btn-invisible tc-remove-tag-button">&times;</$button></span>
</$set>
</$list>

<div class="tc-edit-add-tag">
<span class="tc-add-tag-name">
<$edit-text tiddler="$:/temp/NewTagName" tag="input" default="" placeholder={{$:/language/EditTemplate/Tags/Add/Placeholder}} focusPopup=<<qualify "$:/state/popup/tags-auto-complete">> class="tc-edit-texteditor"/>
</span> <$button popup=<<qualify "$:/state/popup/tags-auto-complete">> class="tc-btn-invisible tc-btn-dropdown" tooltip={{$:/language/EditTemplate/Tags/Dropdown/Hint}} aria-label={{$:/language/EditTemplate/Tags/Dropdown/Caption}}>{{$:/core/images/down-arrow}}</$button> <span class="tc-add-tag-button">
<$button message="tm-add-tag" param={{$:/temp/NewTagName}} set="$:/temp/NewTagName" setTo="" class="">
<<lingo Tags/Add/Button>>
</$button>
</span>
</div>

<div class="tc-block-dropdown-wrapper">
<$reveal state=<<qualify "$:/state/popup/tags-auto-complete">> type="nomatch" text="" default="">
<div class="tc-block-dropdown">
<$linkcatcher set="$:/temp/NewTagName" setTo="" message="tm-add-tag">
<$list filter="[!is[shadow]tags[]search{$:/temp/NewTagName}sort[title]]">
<$link>
<$set name="backgroundColor" value={{!!color}}>
<span style=<<tag-styles>> class="tc-tag-label">
<$view field="title" format="text"/>
</span>
</$set>
</$link>
</$list>
</$linkcatcher>
</div>
</$reveal>
</div>
</$fieldmangler>
</div>