@using System.Linq.Expressions
 
<div id="markdownEditor" class="border border-1">
    <ul class="nav nav-tabs border-bottom border-1" id="editorTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="editor-link nav-link @(isWriteActive ? "active" : "")" id="editor-tab"
               data-toggle="tab" href="#editor" role="tab"
               aria-controls="editor" aria-selected="true" @onclick:preventDefault 
               @onclick="() => HandleWriteClick()">
               Markdown
           </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="editor-link nav-link editor-link-preview @(isWriteActive ? "" : "active")" id="preview-tab" data-toggle="tab" href="#preview" role="tab"
               aria-controls="preview" aria-selected="false" @onclick:preventDefault 
               @onclick="() => HandlePreviewClick()">
               Preview
           </a>
        </li>
        @if (EnableToolbar || HighlightPlaceholders)
        {
            <li class="nav-item ms-auto markdown-toolbar">
                @if (EnableToolbar)
                {
                    <button class="btn btn-sm btn-secondary" @onclick:preventDefault 
                            @onclick="() => HandleBoldClick()"><i class="fas fa-bold"></i></button>
                    <button class="btn btn-sm btn-secondary" @onclick:preventDefault 
                            @onclick="() => HandleItalicClick()"><i class="fas fa-italic"></i></button>
                    <button class="btn btn-sm btn-secondary" @onclick:preventDefault 
                            @onclick="() => HandleListClick()"><i class="fas fa-list"></i></button>   
                }
                @if (HighlightPlaceholders)
                {
                    <button class="btn btn-sm btn-secondary" data-bs-toggle="dropdown"><i class="fas fa-code"></i></button>
                    <ul class="dropdown-menu dropdown-menu-start dropdown-menu-md-end position-absolute">
                        @foreach (string placeholder in HighlightedPlaceholders)
                       {
                           <li><a class="dropdown-item" style="cursor: pointer;" @onclick:preventDefault 
                            @onclick="() => HandlePlaceholderClick(placeholder)">@placeholder</a></li>   
                       }
                    </ul>   
                }
            </li>
        }
    </ul>
 
    <div class="tab-content">
        @if (isWriteActive)
        {
            <div class="tab-pane fade show active" id="editor" role="tabpanel" aria-labelledby="editor-tab">
                <textarea id="@id" value="@Value" @oninput="HandleInput" class="@_fieldCssClasses form-control editor-textarea" 
                    style="height: @heightString; resize: none;"></textarea>
            </div>
        }
        else
        {
            <div class="tab-pane fade show active editor-preview" role="tabpanel" style="height: @heightString;">
                @((MarkupString)_previewText)                
            </div>
        }
    </div>
    <div class="bg-light p-2 small text-muted d-flex align-items-center">
        <div>
            Learn about markdown <a class="text-decoration-none" target="_blank" href="https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax">here</a>
        </div>
        <div class="ms-auto">
            <i class="fab fa-markdown"></i>
        </div>        
    </div>
</div>