<!-- template for /history/{pk}/ view -->
<script type="text/x-template" id="template_view_history_one">
    <div style="display:contents;" >

        <div class="in-loading" v-if="loading">
            <div id="loader-wrapper">
                <div id="loader"></div>
            </div>
        </div>

        <div class="content-wrapper" v-if="error">
            <section class="content-header">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-6">
                            <h1>
                        <span @click="goToHistoryRecord(-1)" class="btn btn-default">
                            <span class="fa fa-arrow-left"></span>
                        </span>
                                <span class="h1-header" > Error {{ error.status }} </span>
                            </h1>
                        </div>
                        <div class="col-lg-6">
                            <breadcrumbs :breadcrumbs="breadcrumbs"></breadcrumbs>
                        </div>
                    </div>
                </div>
            </section>
            <section class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12">
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <section class="col-lg-12">
                            <div class="card card-info">
                                <div class="card-header with-border">
                                    <br>
                                </div>
                                <div class="card-body">
                                    {{ error_data }}
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
            </section>
        </div>

        <div class="content-wrapper-2" id='spajs-right-area' v-if="response">
            <section class="content-header">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-6">
                            <h1>
                                <span @click="goToHistoryRecord(-1)" class="btn btn-default">
                                    <span class="fa fa-arrow-left"></span>
                                </span>
                                <span class="h1-header" > {{ title  | capitalize | split }}</span>
                            </h1>
                        </div>
                        <div class="col-lg-6" >
                            <breadcrumbs :breadcrumbs="breadcrumbs"></breadcrumbs>
                        </div>
                    </div>
                </div>
            </section>
            <section class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12">
                            <gui_buttons_row :view="view" :data="data" :opt="opt"></gui_buttons_row>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <section class="col-lg-12 col col-xl-9">
                            <!-- Section with Inventory fields -->
                            <section>
                                <div class="card card-info">
                                    <div class="card-header with-border" style="min-height: 50px;">
                                        <field_fk_just_value :field="inventory_field"
                                                             :wrapper_opt="inventory_field_wrapper_opt"
                                                             :prop_data="inventory_field_prop_data"
                                        >
                                        </field_fk_just_value>
                                        <!-- Button for collapse  and expand this section -->
                                        <button type="button" class="btn btn-card-tool btn-sm btn-light btn-icon"
                                                @click="inventory_toggle = !inventory_toggle" style="float: right;"
                                        >
                                            <i class="fa fa-plus" :class="inventory_toggle ? 'fa-minus' : 'fa-plus'"></i>
                                        </button>
                                    </div>
                                    <transition name="fade">
                                        <div class="card-body" v-show="inventory_toggle">
                                            <field_one_history_raw_inventory :field="raw_inventory_field"
                                                                             :wrapper_opt="inventory_field_wrapper_opt"
                                                                             :prop_data="inventory_field_prop_data"
                                            >
                                            </field_one_history_raw_inventory>
                                        </div>
                                    </transition>
                                </div>
                            </section>

                            <!-- Section with output information -->
                            <section>
                                <div class="card card-info">
                                    <div class="card-header with-border" style="min-height: 50px;">
                                        <span>Execution output</span>


                                        <!-- Button for collapse  and expand this section -->
                                        <button type="button" class="btn btn-card-tool btn-sm btn-light btn-icon"
                                                style="float: right;" @click="output_toggle = !output_toggle"
                                        >
                                            <i class="fa fa-plus" :class="output_toggle ? 'fa-minus' : 'fa-plus'"></i>
                                        </button>

                                        <clear_button v-show="clear_button_show" type="action"
                                                      :options="clear_button_options"
                                                      :look="clear_button_look">
                                        </clear_button>

                                    </div>
                                    <transition name="fade">
                                        <div class="card-body" v-show="output_toggle">
                                            <history_stdout :instance="data.instance" :url="url" :cleared="was_cleared"></history_stdout>
                                        </div>
                                    </transition>
                                    <transition name="fade">
                                        <div class="card-footer clearfix" v-if="content_footer_component && !card_collapsed">
                                            <component :is="content_footer_component" :data="data" :view="view" :opt="opt"></component>
                                        </div>
                                    </transition>
                                </div>
                                <component :is="content_additional" :data="data" :view="view" :opt="opt" v-if="content_additional">
                                </component>
                            </section>
                        </section>

                        <!-- Section with information about task -->
                        <!--<section class="col-lg-8 col-xl-3 col-lg-8">-->
                        <section class="col-lg-12 col-xl-3">
                            <div class="card card-info">
                                <div class="card-header with-border" style="min-height: 50px;">
                                    <span>Details</span>
                                    <!-- Button for collapse  and expand this section -->
                                    <button type="button" class="btn btn-card-tool btn-sm btn-light btn-icon"
                                            @click="information_toggle = !information_toggle" style="float: right;"
                                    >
                                        <i class="fa fa-plus" :class="information_toggle ? 'fa-minus' : 'fa-plus'"></i>
                                    </button>
                                </div>
                                <transition name="fade">
                                    <div class="card-body" v-show="information_toggle">
                                        <component :is="content_body_component" :data="data" :view="view" :opt="opt"></component>
                                    </div>
                                </transition>
                                <transition name="fade">
                                    <div class="card-footer clearfix" v-if="content_footer_component && !card_collapsed">
                                        <component :is="content_footer_component" :data="data" :view="view" :opt="opt"></component>
                                    </div>
                                </transition>
                            </div>
                            <component :is="content_additional" :data="data" :view="view" :opt="opt" v-if="content_additional">
                            </component>
                        </section>
                    </div>
                </div>
            </section>
        </div>
    </div>
</script>

<!-- template of history stdout component -->
<script type="text/x-template" id="template_history_stdout">
    <div>
        <span>
            <b>stdout</b> (<a :href="raw_stdout_link" target="_blank" class="revers-color">Full raw stdout</a>)
            <i class="fa fa-spinner fa-pulse fa-fw" v-show="loading"></i>
        </span>
        <pre class="history-stdout" v-html="linesHTML" @scroll="scrollHandler"></pre>
    </div>
</script>
