{{--@TODO fix this to use spatie for validation--}}
<div class="form-row pb-1">
    <div class="col">
        <label for="new_text">Text</label>
        <textarea id="new_text_text" class="form-control w-100" onkeyup="updateTextPreview()"></textarea>

    </div>
</div>
<div class="form-row pb-1">

    <div class="col">
        <label for="new_text_font">Font</label>
        <select class="form-control" onchange="updateTextPreview()" id="new_text_font">
            <option value="Arial">Arial</option>
            <option value="Arial Black">Arial Black</option>
            <option value="Times">Times New Roman</option>
            <option value="Comic Sans MS">Comic Sans MS</option>
            <option value="Courier New">Arial Black</option>

        </select>

    </div>
    <div class="col">
        <label for="new_text_size">Size</label>
        <select class="form-control" onchange="updateTextPreview()" id="new_text_size">
            <option value="10">10</option>
            <option value="12">12</option>
            <option value="14" selected>14</option>
            <option value="16">16</option>
            <option value="18">18</option>
            <option value="20">20</option>
            <option value="22">22</option>
            <option value="24">24</option>
            <option value="26">26</option>
            <option value="28">28</option>
            <option value="36">36</option>
            <option value="48">48</option>
            <option value="72">72</option>
        </select>
    </div>

</div>
<div class="form-row pb-1">
    <div class="col">
        <label for="new_font">Colour</label>
        <div id="new_text_colour"
             class="text-colorpicker colorpicker-category col">
            <input data-type="colour" type="text"
                   class="form-control input-lg"
                   style="display: none" value="#000000"/>
            <span class="input-group-append">
                                                        <span class="input-group-text colorpicker-input-addon">
                                                            <i></i></span>
                                                    </span>
        </div>
    </div>
    <div class="col">
        <label for="new_alignment">Alignment</label>
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-outline-secondary active" data-tippy-content="Left">
                <input type="radio" name="new_alignment" autocomplete="off" checked onchange="updateTextPreview()"
                       value="left">
                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-justify-left" fill="currentColor"
                     xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                          d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
                </svg>
            </label>
            <label class="btn btn-outline-secondary" data-tippy-content="Center">
                <input type="radio" name="new_alignment" autocomplete="off" value="center"
                       onchange="updateTextPreview()">
                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-justify" fill="currentColor"
                     xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                          d="M2 12.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
                </svg>
            </label>
            <label class="btn btn-outline-secondary" data-tippy-content="Right">
                <input type="radio" name="new_alignment" autocomplete="off" value="right"
                       onchange="updateTextPreview()">
                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-justify-right" fill="currentColor"
                     xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                          d="M6 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
                </svg>
            </label>
        </div>
    </div>
    <div class="col">
        <label for="new_style">Style</label>
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-outline-secondary">
                <input type="checkbox" autocomplete="off" id="new_text_bold" onchange="updateTextPreview()">
                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-type-bold" fill="currentColor"
                     xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13H8.21zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"/>
                </svg>
            </label>
            <label class="btn btn-outline-secondary">
                <input type="checkbox" autocomplete="off" id="new_text_italic" onchange="updateTextPreview()">
                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-type-italic" fill="currentColor"
                     xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M7.991 11.674L9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"/>
                </svg>
            </label>
            <label class="btn btn-outline-secondary">
                <input type="checkbox" autocomplete="off" id="new_text_underline" onchange="updateTextPreview()">
                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-type-underline" fill="currentColor"
                     xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M5.313 3.136h-1.23V9.54c0 2.105 1.47 3.623 3.917 3.623s3.917-1.518 3.917-3.623V3.136h-1.23v6.323c0 1.49-.978 2.57-2.687 2.57-1.709 0-2.687-1.08-2.687-2.57V3.136z"/>
                    <path fill-rule="evenodd" d="M12.5 15h-9v-1h9v1z"/>
                </svg>
            </label>
        </div>
    </div>
</div>

<div class="form-row pb-1">
    <div class="col">
        <label for="new_text_preview_lbl">Text- drag to canvas or insert</label>
        <div id="new_text_preview" style="min-height: 50px; border: 1px solid black">Text</div>
    </div>
</div>



<div class="form-row">
    <button class="btn btn-primary btn-block" onclick="addTextToCanvas(100,100)">Insert</button>
</div>