<!-- TEST: Added class 'cm-s-ipython' to give codemirror same style with Jupyter -->

<div class="vp-option-page vp-udf-page cm-s-ipython" id="vp_inputPage">

<div class="vp-option-header">

<label for="vp_udfTitle">UDC Name: </label>

<input type="text" id="vp_udfTitle" class="vp-input" placeholder="title to save"/>

<button type="button" id="vp_udfSave" class="vp-btn vp-save-btn">Save</button>

</div>

<form id="vp_optionForm">

<!-- <label for="vp_userCode">User Code</label> -->

<!-- TEST: CodeMirror -->

<textarea id="vp_userCode" name="code" style="display: none;" placeholder="input user code"></textarea>

</form>

<br/>

<hr style="margin:0px;"/>

<div class="vp-option-btn-box">

<button type="button" id="vp_udfCreate" class="vp-btn vp-create-btn">New</button>

<button type="button" id="vp_udfRefresh" class="vp-btn">Refresh</button>

<button type="button" id="vp_udfDelete" class="vp-btn vp-delete-btn">Delete</button>

</div>

<!-- <div class="vp-accordion-container vp-accordion-open">

<div class="vp-accordion-header">

<span class="vp-accordion-indicator"></span>

<span class="vp-accordion-caption" data-caption-id="TODO:Variable">Saved Udf List

<i id="vp_udfRefresh" class="fa fa-refresh"></i>

</span>

</div>

<div class="vp-accordion-content"> -->

<table id="vp_udfList" class="vp-option-table vp-option-horizontal-table-layout">

<colgroup><col width="100px"/><col width="*"/></colgroup>

<tr>

<th>UDC Name</th>

<th>Code</th>

</tr>

</table>

<!-- </div>

</div> -->

</div>