| 
<div class="container-fluid" style="padding: 35px;" >
    <h2 class="featurette-heading"><span class="">Application options</span></h2>
    <hr>
    <h4 class="featurette-heading"><span class="text-muted">this is the basic configuration in the conf/options file, you can add others options directly</span></h4>
    <br>
    {% if flash['config_err'] %}
    <div class="alert alert-danger alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <strong>Ops an error ocurred!</strong> {{ flash['config_err'] }}
    </div>
    {% endif %}
    {% if flash['config_succ'] %}
    <div class="alert alert-success alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <strong>{{ flash['config_succ'] }}</strong> {{ flash['config_succ_detail'] }}
    </div>
    {% endif %}
    <br>
    <div class="featurette" style="background: transparent !important;">
        <form class="form-horizontal" method="POST" action="{{ path('_raptor_configuration_configure') }}">
            <div class="row">
                <div class="col-md-4">
                    <label data-toggle="tooltip" data-placement="top" title="Name of your project, its used to create a session name too" class="control-label" for="proyect">Project name</label>
                    <div class="controls">
                        <input class="form-control" name="proyect" type="text" id="proyect" placeholder="project name" value="{{ raptor.name }}">
                    </div>
                </div>
            </div>
            <br>
            <h4>Database configuration</h4>
            <hr style="margin-bottom:0px;margin-top: 0px">
            <div class="row">
                <div class="col-md-4">
                    <label data-toggle="tooltip" data-placement="top" title="Driver to use in the database connection" class="control-label" for="driver">Driver</label>
                    <div class="controls">
                        <select class="form-control" name="driver" id="driver">
                            <option >pdo_pgsql</option>
                            <option >pdo_mysql</option>
                            <option >pdo_sqlite</option>
                            <option >pdo_odbc</option>
                            <option >pdo_oci</option>
                        </select>
                    </div>
                </div>
            </div>     
            <div class="row">
                <div class="col-md-4">
                    <label data-toggle="tooltip" data-placement="top" title="Database name to connect with" class="control-label" for="inputDB">DB name</label>
                    <div class="controls">
                        <input class="form-control" name="db" type="text" id="inputDB" placeholder="" value="{{ db.dbname }}">
                    </div>
                </div>    
                <div class="col-md-4">
                    <label data-toggle="tooltip" data-placement="top" title="Database host address" class="control-label" for="inputHost">Host</label>
                    <div class="controls">
                        <input name="host" class="form-control" type="text" id="inputHost" placeholder="" value="{{ db.host }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <label data-toggle="tooltip" data-placement="top" title="Database port to connect with" class="control-label" for="inputPort">Port</label>
                    <div class="controls">
                        <input name="port" class="form-control" type="text" id="inputPort" placeholder="" value="{{ db.port }}">
                    </div>
                </div>
            </div>  
            <div class="row">
                <div class="col-md-4">
                    <label data-toggle="tooltip" data-placement="top" title="Database user" class="control-label" for="inputUser">User</label>
                    <div class="controls">
                        <input name="user" class="form-control" type="text" id="inputUser" placeholder="" value="{{ db.user }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <label data-toggle="tooltip" data-placement="top" title="Database password" class="control-label" for="inputPass">Password</label>
                    <div class="controls">
                        <input name="password" class="form-control" type="password" id="inputPass" placeholder="" value="{{ db.password }}">
                    </div>
                </div>
            </div>
            <br>
            <h4>General</h4>
            <hr style="margin-bottom:0px;margin-top: 0px">
            <div class="row">
                <div class="col-md-4">
                    <label data-toggle="tooltip" data-placement="top" title="Secret key, used to create protections agains CSRF, encryptions tokens etc.." class="control-label" for="inputSecret">Secret</label>
                    <div class="input-group">
                        <input name="secret" class="form-control" type="text" id="inputSecret" placeholder="" value="{{ raptor.secret }}">
                        <span class="input-group-btn">
                            <button class="btn btn-default" class="" id="Generator" type="button">Generate!</button>
                        </span>
                    </div>
                </div>
                <div class="col-md-4">
                    <label data-toggle="tooltip" data-placement="top" title="Default language used in the idiomatic context" class="control-label" for="lang">Language</label>
                    <div class="controls">
                        <select class="form-control" name="lang" id="lang" >
                         {% for item in raptor.locales %}
                                <option>{{ item }}</option>
                          {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4 ">
                        <label data-toggle="tooltip" data-placement="top" title="Default time to keep the http cache alive" class="control-label" for="cache">Cache</label>
                        <div class="controls">
                            <input name="cache" class="form-control" type="text" id="cache" placeholder="" value="{{ raptor.cache }}">
                        </div>
                    </div>     
                </div>
                <div class="row">
                </div>
                <div class="row pull-left" style="margin-top: 40px;margin-bottom: 40px;">
                    <div class="col-md-4">
                        <button type="submit" id="btn-config" class="btn btn-success"><i class="icon-raptor-configure icon-white" style="margin-right: 5px"></i>Configure</button>
                    </div>
                </div>
            </form>
            <br><br>
        </div>
        <script type="text/javascript">
            $(document.body).ready(function() {
                $('#Generator').click(generateSecret);
                $('#driver').val("{{db.driver}}");
                $('#lang').val("{{raptor.language}}");
                $('#btn-config').click(function() {
                    $(this).attr({disabled: true});
                    UIR.load.show('Configuring Raptor....')
                })
                Interactive.show('raptor.configuration.conf');
                $('[data-toggle="tooltip"]').tooltip();
            });
            function generateSecret() {
                for (var c = ''; c.length < 32; )
                    c += 'abcdefgh1234567890@#$%*ijklmnopqrstuvwxyz'.charAt(Math.random() * 26)
                $('#inputSecret').val(c);
            }
            </script>
        </div>
 |