    <ol class="breadcrumb">
        <li><a href="#/">Dashboard</a></li>
        <li>Form</li>
        <li class="active">Inline Editor</li>
    </ol>


<div class="container-fluid" ng-controller="InlineEditableController">
    <panel panel-class="panel-sky" heading="Inline Editing">
        <div class="alert alert-success">Angular Xeditable allows for fast and easy inline editing. Try it out!</div>

        <div action="" class="form-horizontal row-border">
            <div class="form-group">
                <label class="col-sm-3 control-label">Simple Text Field</label>
                <div class="col-sm-6 form-control-static">
                    <a editable-text="user.name">{{ user.name || 'empty' }}</a>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">Select Box / Local</label>
                <div class="col-sm-6 form-control-static">
                    <a editable-select="user.status" e-ng-options="s.value as s.text for s in statuses">{{ showStatus() }}</a>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">Email</label>
                <div class="col-sm-6 form-control-static">
                    <a editable-email="user.email">{{ user.email || 'empty' }}</a>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">Telephone</label>
                <div class="col-sm-6 form-control-static">
                    <a editable-tel="user.tel" e-pattern="\d{3}\-\d{2}\-\d{2}" e-title="xxx-xx-xx">{{ user.tel || 'empty' }}</a>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">Number</label>
                <div class="col-sm-6 form-control-static">
                    <a editable-number="user.number" e-min="18">{{ user.number || 'empty' }}</a>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">Range</label>
                <div class="col-sm-6 form-control-static">
                    <a editable-range="user.range" e-step="5">{{ user.range || 'empty' }}</a>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">URL</label>
                <div class="col-sm-6 form-control-static">
                    <a editable-url="user.url">{{ user.url || 'empty' }}</a>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">Search</label>
                <div class="col-sm-6 form-control-static">
                    <a editable-search="user.search">{{ user.search || 'empty' }}</a>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">Color</label>
                <div class="col-sm-6 form-control-static">
                    <a editable-color="user.color">{{ user.color || 'empty' }}</a>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">Date</label>
                <div class="col-sm-6 form-control-static">
                    <a editable-date="user.date">{{ user.date || 'empty' }}</a>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">Time</label>
                <div class="col-sm-6 form-control-static">
                    <a editable-time="user.time">{{ user.time || 'empty' }}</a>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">Date/Time</label>
                <div class="col-sm-6 form-control-static">
                    <a editable-datetime="user.datetime">{{ user.datetime || 'empty' }}</a>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">Month</label>
                <div class="col-sm-6 form-control-static">
                    <a editable-month="user.month">{{ user.month || 'empty' }}</a>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">Week</label>
                <div class="col-sm-6 form-control-static">
                    <a editable-week="user.week">{{ user.week || 'empty' }}</a>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">Textarea</label>
                <div class="col-sm-6 form-control-static">
                    <a editable-textarea="user.desc" e-rows="7" e-cols="40"><pre>{{ user.desc || 'no description' }}</pre></a>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">Checkbox</label>
                <div class="col-sm-6 form-control-static">
                    <a editable-checkbox="user.remember" e-title="Remember?">{{ user.remember && "Remember me!" || "Don't remember" }}</a>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">Radiolist</label>
                <div class="col-sm-6 form-control-static">
                    <a editable-radiolist="user.status" e-ng-options="s.value as s.text for s in statuses">{{ showStatus() }}</a>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">Bootstrap Calendar</label>
                <div class="col-sm-6 form-control-static">
                    <a editable-bsdate="user.dob" e-datepicker-popup="dd-MMMM-yyyy">{{ (user.dob | date:"dd/MM/yyyy") || 'empty' }}</a>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">Bootstrap Time</label>
                <div class="col-sm-6 form-control-static">
                    <a editable-bstime="user.timebs" e-show-meridian="false" e-minute-step="10">{{ (user.time | date:"HH:mm") || 'empty' }}</a>
                </div>
            </div>
       </div>
        
    </panel>
</div>

