<?php 
/**
*  Component  : Project
*  View       : Project Controller
*  Engine     : ProjectEngine  
*  File       : add-dialog.blade.php  
*  Controller : ArticleContentGeneratorController
----------------------------------------------------------------------------- */
?>
<style>
    button:focus,
    textarea:focus {
        outline: none;
    }
</style>
<div>
    <!-- Modal Heading -->
    <div class="modal-header">
        <h3>
            <?= __tr('AI Content Generator') ?>
        </h3>
    </div>
    <!-- /Modal Heading -->

    <!-- Add project dialog form -->
    <form class="ui form lw-form lw-ng-form"
        name="ArticleContentGeneratorCtrl.[[ArticleContentGeneratorCtrl.ngFormName]]"
        ng-submit="ArticleContentGeneratorCtrl.submit()" novalidate>

        <div class="modal-body">
            <div class="">
                <lw-form-field field-for="previous_articles__id" label="<?= __tr('Choose ChatGPT Model') ?>"
                    class="lw-selectize">
                    <select class="form-control" name="chatGptModel"
                        ng-model="ArticleContentGeneratorCtrl.chatGptResponseData.modelSelected"
                        ng-options="model as key for (model, key) in ArticleContentGeneratorCtrl.chatGptResponseData.chatGpt_model">
                    </select>
                </lw-form-field>
                <lw-form-field field-for="show_captcha" label="<?= __tr('Max tokens') ?>">
                    <div class="input-group">
                        <input type="number" class="lw-form-field form-control" autofocus name="show_captcha"
                            ng-required="true" min="50" ng-model="ArticleContentGeneratorCtrl.chatGptResponseData.token" />
                        <div class="input-group-append">
                            <span class="input-group-text"
                                id="basic-addon2"><?= __tr('max number of tokens') ?></span>
                        </div>
                    </div>
                </lw-form-field>
                <div class="alert alert-primary small">
                    <strong>{{ __tr("Note") }}: </strong>
                    <span>{{ __tr("The maximum number of tokens to generate in the completion. 
                        The token count of your prompt plus max_tokens cannot exceed the model's context length. Most models have a context length of 2048 tokens (except for the newest models, which support 4096).") }}</span>
               </div>

                <lw-form-field field-for="short_description" label="<?= __tr('Query') ?>">
                    <textarea ng-model="ArticleContentGeneratorCtrl.chatGptResponseData.query" cols="10" rows="3"
                        class="lw-form-field form-control" name="short_description" placeholder="Type and submit to ask ChatGPT" ng-minlength="1"
                        ng-maxlength="500" ng-required="true"></textarea>
                </lw-form-field>
                <button type="submit" class="lw-btn btn btn-primary float-right" title="<?= __tr('Submit') ?>" style="margin-top: -5px;margin-bottom: 14px;">
                    <?= __tr('Submit') ?>
                </button>

                <div class="col-sm-10 text-center"
                    ng-if="ArticleContentGeneratorCtrl.chatGptResponseData.loading == true">
                    <img class="mx-auto d-block" src="<?= asset('dist/imgs/page-load-loader.gif') ?>" alt="loader"
                        style="height: 100px;">
                </div>
                <div ng-if="ArticleContentGeneratorCtrl.chatGptResponseData.response.length > 0">
                    <span>{{ __tr("Generated Result") }}</span>
                </div>
                <div ng-if="ArticleContentGeneratorCtrl.chatGptResponseData.chatGptResponse == true">
                    <textarea ng-model="ArticleContentGeneratorCtrl.chatGptResponseData.response" cols="5" rows="3"
                        class="lw-form-field form-control" id="isMessageResponse" readonly
                        style="height: auto; min-height: 100px;"></textarea>
                </div>
                <div class="lw-form-footer">
                    <button type="button" class="lw-btn btn btn-danger"
                        ng-if="ArticleContentGeneratorCtrl.chatGptResponseData.response.length > 0"
                        ng-click="ArticleContentGeneratorCtrl.closeDialog()">
                        {{ __tr('Discard') }}
                    </button>
                    <button type="button" class="lw-btn btn btn-primary"
                        ng-if="ArticleContentGeneratorCtrl.chatGptResponseData.response.length > 0"
                        ng-click="ArticleContentGeneratorCtrl.contentInsert(ArticleContentGeneratorCtrl.chatGptResponseData.response)">
                        {{ __tr('Insert and Replace') }}
                    </button>
                    <button type="button" class="lw-btn btn btn-secondary"
                        ng-if="ArticleContentGeneratorCtrl.chatGptResponseData.response.length > 0"
                        ng-click="ArticleContentGeneratorCtrl.contentAppend(ArticleContentGeneratorCtrl.chatGptResponseData.response)">
                        {{ __tr('Insert and Append') }}
                    </button>
                </div>
            </div>
        </div>
        <div class="lw-form-footer"></div>
    </form>
</div>