{% load static %}
<!-- Edit Package -->
<div id="update_prediction_settings_modal" class="modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Update Prediction Setting</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>To update your prediction setting modify parameters in the form below und click "Update"</p>
                <form id="edit-prediction-setting-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
                    {% csrf_token %}
                    <div id="prediction-setting" class="panel-collapse collapse in">
                        <div class="panel-body list-group-item">

                            <table class="table table-bordered table-hover">
                                <tr style="background-color: rgba(0, 0, 0, 0.08);">
                                    <th scope="col" width="20%">Parameter</th>
                                    <th scope="col" width="80%">Value</th>
                                </tr>
                                <tbody>
                                {% if 'model' in user.prediction_settings %}
                                <tr>
                                    <td width="20%">Model</td>
                                    <td width="80%">
                                        <table width="100%" class="table table-bordered table-hover">
                                            <tbody>
                                            <tr>
                                                <td colspan="2">
                                                    <select id="model" name="model" class="form-control" data-width='100%'>
                                                    {% for m in models %}
                                                    <option value="{{ m.id }}" {% if user.prediction_settings.model.url == m.url %}selected{% endif %}>{{ m.name }}</option>
                                                    {% endfor %}
                                                    </select>
                                                </td>
                                            </tr>
                                            {% for k, v in user.prediction_settings.model_parameters.items %}
                                            <tr>
                                                <th width="20%">Model Parameter</th>
                                                <th width="80%">Parameter Value</th>
                                            </tr>
                                            <tr>
                                                <td width="20%">
                                                    {% if k == 'threshold' %}
                                                    Threshold
                                                    {% endif %}
                                                </td>
                                                <td width="80%">
                                                    {% if k == 'threshold' %}
                                                    <input type="number" class="form-control" name="{{k}}" value="{{v}}"
                                                           min="0" max="1" step="0.05">
                                                    {% endif %}
                                                </td>
                                            </tr>
                                            {% endfor %}
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                                {% endif %}
                                {% for k, v in user.prediction_settings.truncator.items %}
                                <tr>
                                    <td><p>
                                        {% if k == 'max_nodes' %}
                                        Max Nodes
                                        {% elif k == 'max_depth' %}
                                        Max Depth
                                        {% endif %}
                                    </p></td>
                                    <td><p>
                                        {% if k == 'max_nodes' %}
                                        <input type="number" class="form-control" name="{{k}}" value="{{v}}" min="1"
                                               max="50" step="1">
                                        {% elif k == 'max_depth' %}
                                        <input type="number" class="form-control" name="{{k}}" value="{{v}}" min="1"
                                               max="8" step="1">
                                        {% endif %}
                                    </p></td>
                                </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="edit-prediction-setting-modal-submit">Update</button>
            </div>
        </div>
    </div>
</div>
<script>
    $(function() {

        $('#edit-prediction-setting-modal-submit').click(function(e){
            e.preventDefault();
            $('#edit-prediction-setting-modal-form').submit();
        });

    })
</script>