<template>
    <div class="content-wrapper">
        <div class="row">
            <div class="col-12 col-md-5 col-lg-4 mb-3">
                <div class="card">
                    <div class="card-body p-3">
                        <!-- header parts -->
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div class="d-flex align-items-center">
                                <div
                                    class="alert alert-primary d-flex justify-content-center align-items-center p-0 m-0 icon">
                                    <app-icon name="message-square" />
                                </div>
                                <h5 class="m-0 p-0 ml-2">Blog Post</h5>
                            </div>
                            <div>
                                <button @click="favorite" class="btn p-0"><app-icon class="text-warning"
                                        name="star" /></button>
                            </div>
                        </div>
                        <p class="mb-3">Write a full blog section (few paragraphs) about a subheading of your article</p>
                        <div class="alert alert-primary d-flex align-items-center mb-3">
                            <app-icon name="activity" />
                            <div class="ml-2">Your Blanch is 8,185,490 Words</div>
                        </div>
                        <!-- form -->
                        <form class="" ref="form" data-url="">
                            <div class="form-row">
                                <div class="form-group col-12 px-0">
                                    <label for="login_email">Language</label>
                                    <app-input type="select" :list="[{ id: 1, value: 'option 1' }]" v-model="formData.language" />
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-12 px-0">
                                    <label for="login_email">Title of your blog article</label>
                                    <app-input  type="textarea" v-model="formData.title"/>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-12 px-0">
                                    <label for="login_email">Subheadings</label>
                                    <app-input  type="textarea" v-model="formData.subheadings"/>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <div class="form-row">
                                        <div class="form-group col-12 px-0">
                                            <label for="login_email">Creativity</label>
                                            <app-input type="select" :list="[{ id: 1, value: 'option 1' }]" v-model="formData.creativity" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="form-row">
                                        <div class="form-group col-12 px-0">
                                            <label for="login_email">Tone of Voice</label>
                                            <app-input type="select" :list="[{ id: 1, value: 'option 1' }]" v-model="formData.voice" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <div class="form-row">
                                        <div class="form-group col-12 px-0">
                                            <label for="login_email">Number of result</label>
                                            <app-input type="select" :list="[{ id: 1, value: 'option 1' }]" v-model="formData.result" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="form-row">
                                        <div class="form-group col-12 px-0">
                                            <label for="login_email">langth</label>
                                            <app-input type="text" v-model="formData.length" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-center mb-3">
                                <button class="btn btn-primary rounded-pill">GENERATED TEXT</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-7 col-lg-8">
                <div class="card">
                    <div class="card-body p-3">
                        <!-- header part -->
                        <form class="" ref="form" data-url="">
                            <div class="row mb-3">
                                <div class="col-8">
                                    <div class="row">
                                        <div class="col-6">
                                            <app-input type="select" :list="[{ id: 1, value: 'option 1' }]" v-model="formData2.field1" />
                                        </div>
                                        <div class="col-6">
                                            <app-input type="select" :list="[{ id: 1, value: 'option 1' }]" v-model="formData2.field2" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="d-flex justify-content-end" style="gap: 10px;">
                                        <button class="btn btn-light shadow-none">
                                            <app-icon name="file"></app-icon>
                                        </button>
                                        <button class="btn btn-light">
                                            <app-icon name="file"></app-icon>
                                        </button>
                                        <button class="btn btn-light">
                                            <app-icon name="file"></app-icon>
                                        </button>
                                        <button class="btn btn-light">
                                            <app-icon name="save"></app-icon>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <app-input  type="text-editor" v-model="formData2.field3"/>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { FormMixin } from '../../../core/mixins/form/FormMixin';
export default {
    mixins: [FormMixin],
    data() {
        return {
            formData: {},
            formData2: {}
        }
    },
    methods: {
        favorite() {
            console.log('favorite clicked')
        }
    }
}
</script>

<style scoped>
.icon {
    width: 32px;
    height: 32px;
}
</style>