{% extends "base.html" %}
{% block body %}

<div id="payloadCreation" style="margin-top:5px">
    <div class="card ">
        <div class="card-header bg-header border border-dark shadow text-white">
            <h3><span class="operator">Wrapper Type</span> Selection</h3>
        </div>
        <div class="collapse show" id="c2-card-body">
                <div class="card-header bg-header border border-dark shadow text-white">
                    &nbsp;&nbsp;Select a Payload Type Wrapper.<br>
                </div>
                <div class="card-body border border-dark shadow bg-card-body border-0">
                    <select :disabled="!pt_buttons" :style="!pt_buttons ? 'display:inline-block;width:auto;cursor:not-allowed' : 'display:inline-block;width:auto'" class="form-control" v-model="selected_wrapper">
                        <option v-for="w in wrapper_options" :value="w">[[w]]</option>
                    </select>
                    Supported Wrapped Types: <span v-for="w in list_wrapped_types(selected_wrapper)">[[w.wrapped]]&nbsp;&nbsp;</span>
                    <div id="payloadParameterFormFields">
                        <template v-if="wrapper_parameters.length != 0">
                            <table class="table table-condensed table-striped {{config['table-color']}}" id="payloadParameterTable" style="word-wrap: break-word;width:100%">
                                <tr>
                                    <th style="text-align:left;width:25rem"><b>Parameter Name</b></th>
                                    <th style="text-align:left"><b>Parameter Value</b></th>
                                </tr>
                                <tr v-for="(value, index) in wrapper_parameters" :key="value.name" v-if="value.parameter_type !== 'None'">
                                    <td style="width:25rem;padding-left:10px">
                                        <template v-if="value.description !== ''">
                                            [[value.description]]
                                        </template>
                                        <template v-else>
                                            [[value.name]]
                                        </template>
                                        <template v-if="value.required">
                                            <br><font color="indianred"><b>(Required)</b></font>
                                        </template>
                                    </td>
                                    <td>
                                        <template v-if="!passing_payload_requirements(value)">
                                            <font color="indianred"><b>(Bad Value)</b></font>
                                        </template>
                                        <template v-if="value.parameter_type === 'String'">
                                            <textarea class="form-control" type="text" style="width:100%" :placeholder="[[value.parameter]]" v-model="value.value"></textarea>
                                        </template>
                                        <template v-else-if="value.parameter_type === 'ChooseOne'">
                                            <select class="form-control" v-model="value.value"><option v-for="opt in value.choices" v-model="opt">[[opt]]</option></select>
                                        </template>
                                        <template v-else-if="value.parameter_type === 'Number'">
                                            <input class="form-control" type="number" style="width:100%" v-model="value.value">
                                        </template>
                                    </td>
                                </tr>
                            </table>
                        </template>
                    </div>
                </div>
            <div :hidden="!pt_buttons" class="card-footer bg-card-footer border border-dark shadow">
                <button class="btn btn-sm btn{{config['outline-buttons']}}success" id="move_to_payloads_button" @click="move_to_payloads()">Next</button>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header bg-header border border-dark shadow text-white">
            <h3><span class="operator">Payload </span> Options</h3>
        </div>
        <div class="collapse" id="payload-card-body">
            <div class="card-body border shadow border-dark bg-card-body">
                <template v-if="payload_options.length > 0">
                    Select the payload you want to embed into your payload type.<br>
                    <select class="form-control" v-model="selected_payload" :disabled="!payload_buttons" :style="!payload_buttons ? 'display:inline-block;width:auto;cursor:not-allowed' : 'display:inline-block;width:auto'">
                        <option v-for="p in payload_options" :value="p">[[payload_select_view(p)]]</option>
                    </select><br>
                    Payload Name: <input class="form-control" type="text" style="width:100%" placeholder="File Name" id="location" v-model="name"><br>
                    Payload's Default Description: <input class="form-control" type="text" style="width:100%" placeholder="Default Description of associated Callbacks" v-model="tag" id="default_tag">
                </template>
                <template v-else>
                    <h3>No payloads that can be included have been created yet.</h3>
                    Go to <a class="btn btn-sm btn-link" href="{{links.payloads_creation}}">Payloads Creation</a> to create one first.
                </template>
            </div>
            <template v-if="payload_options.length > 0">
                <div class="card-footer bg-card-footer border shadow border-dark">
                    <button class="btn btn{{config['outline-buttons']}}warning" id="move_from_payloads_button" @click="move_from_payloads()">Back</button>
                    <button class="btn btn{{config['outline-buttons']}}success" id="move_to_commands_button" @click="submit_payload()">Create</button>
                </div>
            </template>
        </div>
    </div>

</div>

{% endblock %}

{% block scripts %}
{% include "wrappers_creation.js" %}
{% endblock %}

{% block body_config %}

{% endblock %}