{% extends 'base.html' %}
{% block content %}
<ol class="breadcrumb pull-right">
    <li><a href="javascript:;">Home</a></li>
    <li class="active">Dashboard</li>
</ol>
<h1 class="page-header">Dashboard <small>header small text goes here...</small></h1>
<div class="row">
    <a class="btn btn-success" data-toggle="modal" href='#subcategory-modal'>Add New Subcategory</a>
</div>
<br/>

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <div class="panel-heading-btn">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-repeat"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
                </div>
                <h4 class="panel-title">Data Table - Default</h4>
            </div>
            <div class="panel-body">
                <table id="data-table" class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>Category</th>
                            <th>Description</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                    <tbody>
                            <tr *ngFor="let subcategory of subcategories" class="odd gradeX">
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="subcategory-modal">
    <div class="modal-dialog">
        <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">Modal title</h4>
            </div>
            <div class="modal-body">

                    <form   class="form-horizontal form-bordered" encType="application/x-www-form-urlencoded"   method="post" acceptCharset="utf-8">
			
                        <div class="form-group">
                            <label class="control-label col-md-4 col-sm-4">Name</label>
                            <div class="col-md-6 col-sm-6">
                                <input class="form-control" type="text" name="name" required="" placeholder="Name"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-md-4 col-sm-4"> Category</label>
                            <div class="col-md-6 col-sm-6">
                                <select class="form-control selectpicker" data-size="10" data-live-search="true" data-style="btn-white"  name="category_id" required="">
                                    <option value="" selected="">Select Product Category</option>
                                </select>
                            </div>
                            </div>
    
                        <div class="form-group">
                            <label class="control-label col-md-4 col-sm-4">Description</label>
                            <div class="col-md-6 col-sm-6">
                                <textarea class="form-control"  name="description" placeholder="Category Description" rows="3"></textarea>
                            </div>
                        </div>
    
                        <div class="form-group">
                            <label class="control-label col-md-4 col-sm-4"></label>
                            <div class="col-md-6 col-sm-6">
                                <button type="submit" class="btn btn-success">Save Category</button>
                            </div>
                        </div>	
    
                    </form>

				                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}