{$layout "layout_popup"}

<!-- <h3>{{t('metrics_charts@创建图表')}}</h3> -->
<form class="ui form" data-tea-action="$" data-tea-success="success">
    <csrf-token></csrf-token>
    <input type="hidden" name="itemId" :value="itemId"/>
    <table class="ui table definition selectable">
        <tr>
            <td class="title">{{t('metrics_charts@图表名称')}} *</td>
            <td>
                <input type="text" maxlength="100" name="name" ref="focus"/>
                <p class="comment">{{t('metrics_charts@也会作为有些图表的标题')}}</p>
            </td>
        </tr>
        <tr>
            <td>{{t('metrics_charts@图表类型')}} *</td>
            <td>
                <b-select
                    name="type"
                    v-model="type"
                    @change="changeType"
                    auto-width
                    :options="[
                        ...types.map(type => ({
                            label: type.name,
                            value: type.code,
                        }))
                    ]"
                ></b-select>

                <!-- <select class="ui dropdown auto-width" name="type" v-model="type" @change="changeType">
                    <option v-for="type in types" :value="type.code">{{type.name}}</option>
                </select> -->
                <p class="comment" v-if="typeDefinition != null"><i class="icon" :class="typeDefinition.icon"></i> {{typeDefinition.description}}</p>
            </td>
        </tr>
        <tr>
            <td colspan="2"><more-options-indicator></more-options-indicator></td>
        </tr>
        <tbody v-show="moreOptionsVisible">
            <tr>
                <td>{{t('metrics_charts@对象数限制')}}</td>
                <td>
                    <input type="text" name="maxItems" maxlength="2" style="width: 4em"/>
                    <p class="comment">{{t('metrics_charts@在图表中能显示的最多对象数0表示不限制')}}</p>
                </td>
            </tr>
            <tr>
                <td>{{t('metrics_charts@忽略空值对象')}}</td>
                <td>
                    <checkbox name="ignoreEmptyKeys"></checkbox>
                    <p class="comment">{{t('metrics_charts@选中后空的对象值不会在图表中出现')}}</p>
                </td>
            </tr>
            <tr>
                <td>{{t('metrics_charts@忽略其他对象')}}</td>
                <td>
                    <values-box name="ignoredKeys"></values-box>
                    <p class="comment">{{t('metrics_charts@这些对象不会在图表中出现')}}</p>
                </td>
            </tr>
        </tbody>
    </table>
    <submit-btn></submit-btn>
</form>