{% extends base_template %}
{% block page_title %}Dashboard Settings - {{ appbuilder.app_name }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h2>Add New Dashboard</h2>
            
            <!-- Back to Dashboards Button -->
            <div class="pull-right">
                <a href="./settings" class="btn btn-secondary">
                    <i class="fa fa-arrow-left"></i> Back to Dashboards
                </a>
            </div>
        <br><br>
            <!-- Add Dashboard Form -->
            <form method="POST" action="./add_dash" class="form-horizontal">
                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">Dashboard Name</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="description" class="col-sm-2 control-label">Description</label>
                    <div class="col-sm-10">
                        <textarea class="form-control" id="description" name="description" rows="3"></textarea>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="url" class="col-sm-2 control-label">URL</label>
                    <div class="col-sm-10">
                        <input type="url" class="form-control" id="url" name="url" required>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="payload" class="col-sm-2 control-label">Payload</label>
                    <div class="col-sm-10">
                        <textarea class="form-control" id="payload" name="payload" rows="5" placeholder="JSON payload for the dashboard"></textarea>
                    </div>
                </div>
                
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary">Add Dashboard</button>
                    </div>
                </div>
            </form>
             
        </div>
    </div>
</div>
{% endblock %}