<div class="row-fluid">
	<div class="span12">
		<div class="widget widget-collapse" data-toggle="collapse-widget" data-collapse-closed="true">
			<div class="widget-head">
				<h4 class="heading glyphicons list"><i></i><key>titulo</key></h4>
			</div>
			<div class="widget-body">
				<div id="nivel-acordo-list-ans">
					<div class='row-fluid'>
						<div class="span2">
							<button class="btn-small btn-block btn-default" onclick="NivelServico.Multinivel.Niveis.Cliente.add(); return false;">Adicionar Acordo de Nível de Serviço</button>
						</div>
					</div>

					<div class="separator"></div>

					<div class="row-fluid">
						<div class="span12">
							<table class="table table-bordered table-condensed table-striped table-primary table-vertical-center">
								<thead>
									<tr>
										<th style="width: 1%;" class="center">No.</th>
										<th>Acordo de Nível de Serviço</th>
										<th class="center" style="width: 60px;">Ações</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td class="center">1</td>
										<td class="important">ANS 1</td>
										<td class="center">
											<a href="#" class="btn-action glyphicons pencil btn-success"><i></i></a>
											<a href="#" class="btn-action glyphicons remove_2 btn-danger"><i></i></a>
										</td>
									</tr>
									<tr>
										<td class="center">2</td>
										<td class="important">ANS 2</td>
										<td class="center">
											<a href="#" class="btn-action glyphicons pencil btn-success"><i></i></a>
											<a href="#" class="btn-action glyphicons remove_2 btn-danger"><i></i></a>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>

				<div id="nivel-acordo-ans" class="hide">
					<div class="widget widget-tabs widget-tabs-double">
						<div class="widget-head">
							<ul>
								<li class="active">
									<a href="#tab-nivel-acordo-cliente-servicos" class="glyphicons list" data-toggle="tab">
										<i></i><span class="strong"><msg>Serviços</msg></span>
										<span><msg>Selecione os Serviços de Negócio</msg></span>
									</a>
								</li>
								<li>
									<a href="#tab-nivel-acordo-cliente-unidades" class="glyphicons building" data-toggle="tab">
										<i></i><span class="strong"><msg>Unidades</msg></span>
										<span><msg>Selecione as Unidades</msg></span>
									</a>
								</li>
								<li>
									<a href="#tab-nivel-acordo-cliente-grupos" class="glyphicons group" data-toggle="tab">
										<i></i><span class="strong"><msg>Grupos</msg></span>
										<span><msg>Selecione os Grupos</msg></span>
									</a>
								</li>
								<li>
									<a href="#tab-nivel-acordo-cliente-usuarios" class="glyphicons user" data-toggle="tab">
										<i></i><span class="strong"><msg>Usuários</msg></span>
										<span><msg>Selecione os Usuários</msg></span>
									</a>
								</li>
								<li>
									<a href="#tab-nivel-acordo-cliente-ans" class="glyphicons cogwheel" data-toggle="tab">
										<i></i><span class="strong"><msg>Configuração</msg></span>
										<span><msg>Realize a configuração do ANS</msg></span>
									</a>
								</li>
							</ul>
						</div>
						<div class="widget-body">
							<div class="tab-content">
								<div class="tab-pane active" id="tab-nivel-acordo-cliente-servicos">
									<table class="table table-bordered table-condensed table-striped table-primary table-vertical-center checkboxs js-table-sortable ui-sortable">
										<thead>
											<tr>
												<th style="width: 1%;" class="uniformjs"><div class="checker" id="uniform-undefined"><span><input type="checkbox" style="opacity: 0;"></span></div></th>
												<th style="width: 1%;" class="center">No.</th>
												<th><msg>Serviços</msg></th>
											</tr>
										</thead>
										<tbody>
											<tr class="selectable">
												<td class="center uniformjs"><div class="checker" id="uniform-undefined"><span><input type="checkbox" style="opacity: 0;"></span></div></td>
												<td class="center">1</td>
												<td class="important">007 - BOND</td>
											</tr>
											<tr class="selectable selected">
												<td class="center uniformjs"><div class="checker" id="uniform-undefined"><span class="checked"><input type="checkbox" checked="checked" style="opacity: 0;"></span></div></td>
												<td class="center">2</td>
												<td class="important">006 - JAMES</td>
											</tr>
											<tr class="selectable selected">
												<td class="center uniformjs"><div class="checker" id="uniform-undefined"><span class="checked"><input type="checkbox" checked="checked" style="opacity: 0;"></span></div></td>
												<td class="center">2</td>
												<td class="important">005 - TANG</td>
											</tr>
										</tbody>
									</table>
								</div>
								<div class="tab-pane" id="tab-nivel-acordo-cliente-unidades">
									<table class="table table-bordered table-condensed table-striped table-primary table-vertical-center checkboxs js-table-sortable ui-sortable">
										<thead>
											<tr>
												<th style="width: 1%;" class="uniformjs"><div class="checker" id="uniform-undefined"><span><input type="checkbox" style="opacity: 0;"></span></div></th>
												<th style="width: 1%;" class="center">No.</th>
												<th><msg>Unidades</msg></th>
											</tr>
										</thead>
										<tbody>
											<tr class="selectable">
												<td class="center uniformjs"><div class="checker" id="uniform-undefined"><span><input type="checkbox" style="opacity: 0;"></span></div></td>
												<td class="center">1</td>
												<td class="important">007 - BOND</td>
											</tr>
											<tr class="selectable selected">
												<td class="center uniformjs"><div class="checker" id="uniform-undefined"><span class="checked"><input type="checkbox" checked="checked" style="opacity: 0;"></span></div></td>
												<td class="center">2</td>
												<td class="important">006 - JAMES</td>
											</tr>
											<tr class="selectable selected">
												<td class="center uniformjs"><div class="checker" id="uniform-undefined"><span class="checked"><input type="checkbox" checked="checked" style="opacity: 0;"></span></div></td>
												<td class="center">2</td>
												<td class="important">005 - TANG</td>
											</tr>
										</tbody>
									</table>
								</div>
								<div class="tab-pane" id="tab-nivel-acordo-cliente-grupos">
									<table class="table table-bordered table-condensed table-striped table-primary table-vertical-center checkboxs js-table-sortable ui-sortable">
										<thead>
											<tr>
												<th style="width: 1%;" class="uniformjs"><div class="checker" id="uniform-undefined"><span><input type="checkbox" style="opacity: 0;"></span></div></th>
												<th style="width: 1%;" class="center">No.</th>
												<th><msg>Grupos</msg></th>
											</tr>
										</thead>
										<tbody>
											<tr class="selectable">
												<td class="center uniformjs"><div class="checker" id="uniform-undefined"><span><input type="checkbox" style="opacity: 0;"></span></div></td>
												<td class="center">1</td>
												<td class="important">007 - BOND</td>
											</tr>
											<tr class="selectable selected">
												<td class="center uniformjs"><div class="checker" id="uniform-undefined"><span class="checked"><input type="checkbox" checked="checked" style="opacity: 0;"></span></div></td>
												<td class="center">2</td>
												<td class="important">006 - JAMES</td>
											</tr>
											<tr class="selectable selected">
												<td class="center uniformjs"><div class="checker" id="uniform-undefined"><span class="checked"><input type="checkbox" checked="checked" style="opacity: 0;"></span></div></td>
												<td class="center">2</td>
												<td class="important">005 - TANG</td>
											</tr>
										</tbody>
									</table>
								</div>
								<div class="tab-pane" id="tab-nivel-acordo-cliente-usuarios">
									<table class="table table-bordered table-condensed table-striped table-primary table-vertical-center checkboxs js-table-sortable ui-sortable">
										<thead>
											<tr>
												<th style="width: 1%;" class="uniformjs"><div class="checker" id="uniform-undefined"><span><input type="checkbox" style="opacity: 0;"></span></div></th>
												<th style="width: 1%;" class="center">No.</th>
												<th><msg>Usuários</msg></th>
											</tr>
										</thead>
										<tbody>
											<tr class="selectable">
												<td class="center uniformjs"><div class="checker" id="uniform-undefined"><span><input type="checkbox" style="opacity: 0;"></span></div></td>
												<td class="center">1</td>
												<td class="important">007 - BOND</td>
											</tr>
											<tr class="selectable selected">
												<td class="center uniformjs"><div class="checker" id="uniform-undefined"><span class="checked"><input type="checkbox" checked="checked" style="opacity: 0;"></span></div></td>
												<td class="center">2</td>
												<td class="important">006 - JAMES</td>
											</tr>
											<tr class="selectable selected">
												<td class="center uniformjs"><div class="checker" id="uniform-undefined"><span class="checked"><input type="checkbox" checked="checked" style="opacity: 0;"></span></div></td>
												<td class="center">2</td>
												<td class="important">005 - TANG</td>
											</tr>
										</tbody>
									</table>
								</div>
								<div class="tab-pane" id="tab-nivel-acordo-cliente-ans">
									<key>ans</key>
								</div>
							</div>
						</div>
					</div>

					<div class="separator"></div>

					<div class='row-fluid'>
						<div class="span2">
							<button class="btn-small btn-block btn-primary" onclick="NivelServico.Multinivel.Niveis.Cliente.save(); return false;">Gravar</button>
						</div>
						<div class="span2">
							<button class="btn-small btn-block btn-default" onclick="NivelServico.Multinivel.Niveis.Cliente.cancel(); return false;">Cancelar</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>