<form class="row g-3 auto-width" action="{{ route('style-types.store') }}" method="post" id="style_type_form">
    @csrf
    @method('post')

    <div class="col-md-6 col-12">
        <label for="name" class="form-label">Style Name<span class="text-danger"><b>*</b></span></label>
        <input type="text" class="form-control name" id="name" name="name" aria-describedby="inputGroupPrepend" placeholder="Style Name">
        <span class="text-danger error_style_type_name" style="display:none;">This field is required.</span>
    </div>

    <div class="col-md-3 col-sm-6 col-12">
        <label for="font_color" class="form-label">Font Color</label>
        <input type="color" class="form-control font_color" id="font_color" name="font_color" aria-describedby="inputGroupPrepend"placeholder="Font Color">
    </div>

    <div class="col-md-3 col-sm-6 col-12">
        <label for="background_color" class="form-label">BG Color</span></label>
        <input type="color" value="#FFFFFF" class="form-control background_color" id="background_color" name="bg_color" aria-describedby="inputGroupPrepend" placeholder="Background Color">
    </div>

    <div class="col-md-6 col-12">
        <label for="font_color" class="form-label">Code</label>
        <input type="text" class="form-control code" id="code" name="code" aria-describedby="inputGroupPrepend"placeholder="Code">
    </div>

    <div class="col-md-6 col-12">
        <label for="text_decoration" class="form-label">Text Decoration
        </label>
        <select id="text_decoration" name="text_decoration" class="form-control form-select">
            <option value="none">None</option>
            <option value="underline">Underline</option>
            <option value="overline">Overline</option>
            <option value="line-through">Line Through</option>
            <option value="blink">Blink</option>
        </select>
    </div>

    <div class="col-md-12 col-12">
        <label for="font_family" class="form-label">Font Family
        </label>
        <select id="font_family" name="font_family" class="form-control form-select">
            @foreach ($fonts as $font)
                <option value="{{ $font->id }}">{{ $font->font_name }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-md-4 col-12">
        <label for="font_size" class="form-label">Font Size
        </label>
        <select id="font_size" name="font_size" class="form-control form-select">
            <option value="10">10px</option>
            <option value="11">11px</option>
            <option value="12">12px</option>
            <option value="13">13px</option>
            <option value="14">14px</option>
            <option value="15">15px</option>
            <option value="16">16px</option>
            <option value="17">17px</option>
            <option value="18">18px</option>
            <option value="19">19px</option>
            <option value="20">20px</option>
        </select>
    </div>

    <div class="col-md-4 col-12">
        <label for="font_style" class="form-label">Font Style
        </label>
        <select id="font_style" name="font_style" class="form-control form-select">
            <option value="normal">Normal</option>
            <option value="italic">Italic</option>
        </select>
    </div>

    <div class="col-md-4 col-12">
        <label for="font_weight" class="form-label">Font Weight
        </label>
        <select id="font_weight" name="font_weight" class="form-control form-select">
            <option value="normal">Normal</option>
            <option value="bold">Bold</option>
        </select>
    </div>

    <div class="col-md-6 col-12">
        <label for="flag" class="form-label">Flag
        </label>
        <input type="text" class="form-control name" id="flag" name="flag" aria-describedby="inputGroupPrepend" placeholder="Flag">
    </div>

    <div class="col-md-6 col-12">
        <label for="font_padding" class="form-label">Padding
        </label>
        <input type="text" class="form-control name" id="font_padding" name="font_padding" aria-describedby="inputGroupPrepend" placeholder="Padding">
    </div>
    
</form>