<div class="modal fade" id="chart-options">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Chart options</h4>
        </div>
        <div class="modal-body">
            <form class="form-block row" id="module-form" role="form">
                <div class="col-md-6">
                    <fieldset>
                        <legend class="lead">Required fields</legend>
                        <label>
                            Name
                            <input class="form-control" type="text" name="name" value="" placeholder="name">
                        </label>
                        <label>
                            Type
                            {% include "partials/form-diagram-options.html" %}
                        </label>
                        <label>
                            width <input class="form-control" type="text" name="width" value="" placeholder="e.g. 500">
                        </label>
                        <label>
                            height <input class="form-control" type="text" name="height" value="" placeholder="e.g. 400">
                        </label>
                        <label>
                            API endpoint (<em>or template path, if using "custom/iframe"</em>) <input class="form-control" type="text" name="dataSource" value="http://" placeholder="e.g. localhost:5000/my/endpoint">
                        </label>
                    </fieldset>
                </div>
                <div class="col-md-6">
                    <fieldset>
                        <legend class="lead">Options</legend>
                        <label>
                            <input type="checkbox" name="override">
                            Use custom configuration? <br><small>Note: this will pass the <strong>entire</strong> payload from <code>config.dataSource</code> to the widget constructor, and may result in errors if not configured properly.</small>
                        </label>
                        <label>
                            <input type="checkbox" name="refresh">
                            Auto-refresh?
                        </label>
                        <br>
                        <label>
                            Auto refresh interval <small>(in milliseconds)</small>
                            <input class="form-control" type="text" name="refreshInterval" value="10000">
                        </label>
                    </fieldset>
                </div>
                <div class="col-md-12">
                    <hr>
                    <p class="lead clearfix">
                        API response
                        <span class="pull-right">
                            <button id="api-output-preview" class="btn btn-xs btn-success">Preview</button>
                        </span>
                    </p>
                    <pre><code id="api-output" class="json">...</code></pre>
                </div>
            </form>
            <br>
            <div class="row">
                <div class="col-md-12">
                    <a href="#chart-docs" data-toggle="collapse">Toggle chart documentation</a>
                    <div class="collapse" id="chart-docs">
                        <ul>
                            {% for label, options in charts_config.items() %}
                                {% if options.help_link %}
                                    <li>
                                        <a href="{{ options.help_link }}" target="_blank">{{ label }}</a>
                                    </li>
                                {% endif %}
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
            {% if view %}
            <button type="button" id="update-module" data-dismiss="modal" class="btn btn-primary">Update</button>
            {% else %}
            <button type="button" id="save-module" data-dismiss="modal" class="btn btn-primary">Save</button>
            {% endif %}
            {% if view %}
            <button id="delete-widget" class="btn btn-danger"><span class="fa fa-times"></span> Delete</button>
            {% endif %}
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
