{{--@TODO fix this to use spatie for validation--}}

<div class="row">
    <div class="col-md-9">
        <div class="search_box search_box_big">
            <div class="search-icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 114.6 164.17">
                    <g data-name="Layer 2">
                        <g data-name="Layer 1">
                            <path
                                d="M89.85,104.43a57.16,57.16,0,1,0-14.54,7.26l23.89,48a8.13,8.13,0,1,0,14.55-7.25ZM57.3,98.35A40.88,40.88,0,1,1,68,96.94,41.09,41.09,0,0,1,57.3,98.35Z"/>
                        </g>
                    </g>
                </svg>
            </div>
            <input type="text" style="width: 100%" placeholder="Search" id="new_template_search_text">
        </div>
        <div class="d-flex align-items-stretch">
            <div class="search_box w-50">
                {{ html()->multiselect('tags[]',$tags->pluck('text', 'id'))->class('tagsselect')->style(['width'=>'100%'])->id('template_tags')
                                     }}
            </div>
            <div class="search_box w-50">
                {{ html()->multiselect('board_templates[]',$board_template_types->pluck('text', 'id'))->class('templateselect')->style(['width'=>'100%'])->id('template_type')
                                     }}
            </div>
        </div>

        <div class="row w-100 template_grid" id="template_tiles"
             style="position: relative; max-height: 400px; overflow-y: auto">


        </div>
        {{--        <ul class="template-tiles" id="template_tiles" style="overflow-y: auto">--}}
        {{--        </div>--}}

    </div>
    <div class="col-md-3">
       <div class="h-100 d-flex flex-column">
            <div class="template_preview_contain mb-3">
                <img id="template_preview" style="">
            </div>
            <div class="mb-2">
                <div class="g_et_al_listtitle"><strong>Name:</strong></div>
                <div class="g_et_al_listtitle" id="selected_template_name_sm"></div>
            </div>
            <div class="mb-2">
                <div class="g_et_al_listtitle"><strong>Description:</strong></div>
                <div class="g_et_al_listtitle" id="selected_template_description"></div>
            </div>
            <div class="mb-2">
                <div class="g_et_al_listtitle"><strong>Tags:</strong></div>
                <div class="g_et_al_listtitle" id="selected_template_tags"></div>
            </div>
            <div class="mb-2">
                <div class="g_et_al_listtitle"><strong>Types:</strong></div>
                <div class="g_et_al_listtitle" id="selected_template_types"></div>
            </div>
           <div class="row justify-content-center flex-grow-1">
              &nbsp;
           </div>
            <div class="mb-2">
                <button id="new_template_btn" onclick="newBoardFromTemplate()" class="btn btn-success btn-block" disabled>
                    Use this template
                </button>
            </div>
       </div>
    </div>
</div>