<template>
    <div class="search-bar">
        <div class="option-searchbar">
            <div class="search-top flex justify-center">
                <div class="flex align-center">
                    <input type="date" name="" id="" class="square-date">
                    <span class="coupler">~</span>
                    <input type="date" name="" id="" class="square-date">
                    <select name="" id="" class="square-select">
                        <option value="all">전체</option>
                    </select>
                    <div class="search-square">
                        <input type="text" class="square-input" placeholder="Search">
                        <button class="square-button">
                            <svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
                        </button>
                    </div>
                </div>
            </div>
            <div class="search-bottom">
                <div class="flex justify-between">
                    <div class="flex flex30 align-center justify-center">
                        <span class="option-title">단일조건</span>
                        <div class="input-container flex">
                            <label class="radio-label">
                                <input type="radio" name="radio" checked="" class="custom-radiobox ">
                                <span>HTML</span>
                            </label>
                            <label class="radio-label">
                                <input type="radio" name="radio" class="custom-radiobox ">
                                <span>CSS</span>
                            </label>
                            <label class="radio-label">
                                <input type="radio" name="radio" class="custom-radiobox ">
                                <span>Javascript</span>
                            </label>
                        </div>
                    </div>
                    <div class="flex flex30 align-center justify-center">
                        <span class="option-title">다중조건</span>
                        <div class="input-container flex">
                            <label class="check-label">
                                <input type="checkbox" name="check" checked="" class="custom-checkbox ">
                                <span>HTML</span>
                            </label>
                            <label class="check-label">
                                <input type="checkbox" name="check" class="custom-checkbox ">
                                <span>CSS</span>
                            </label>
                            <label class="check-label">
                                <input type="checkbox" name="check" class="custom-checkbox ">
                                <span>Javascript</span>
                            </label>
                        </div>
                    </div>
                    <div class="flex flex30 align-center justify-center">
                        <span class="option-title">다중조건</span>
                        <div class="input-container flex">
                            <label class="check-label">
                                <input type="checkbox" name="check" checked="" class="custom-checkbox ">
                                <span>HTML</span>
                            </label>
                            <label class="check-label">
                                <input type="checkbox" name="check" class="custom-checkbox ">
                                <span>CSS</span>
                            </label>
                            <label class="check-label">
                                <input type="checkbox" name="check" class="custom-checkbox ">
                                <span>Javascript</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify } from '@mdi/js';
export default {
    data() {
        return {
            searchPath: mdiMagnify
        }
    },
    methods: {

    },
    watch: {

    },
    computed: {

    },
    components: {
        'SvgIcon': SvgIcon
    },
}
</script>

<style></style>