<% include ../layout/head %>
<%if(query.created=="true"){%>
<div id="successAlert" class="alert alert-success">¡Super! Se creó la Categoría</div>
<script>
    setTimeout(() => {
        document.getElementById("successAlert").style.display = 'none'
    }, 2000)
</script>
<%}%>
<%if(query.deleted=="true"){%>
<div id="successAlert" class="alert alert-success">La categoría se eliminó</div>
<script>
    setTimeout(() => {
        document.getElementById("successAlert").style.display = 'none'
    }, 2000)
</script>
<%}%>
    <%if(query.updated=="true"){%>
<div id="successAlert" class="alert alert-success">La categoría se actualizó correctamente</div>
<script>
    setTimeout(() => {
        document.getElementById("successAlert").style.display = 'none'
    }, 2000)
</script>
<%}%>

<div class="container">
    <div class="row">
        <!-- FORM -->
        <div class="col-md-4">
            <h2>Crear Categoría</h2>
            <div class="card">
                <div class="card-body">

                    <form action="/categories" method="post">
                        <div class="form-group">
                            <label for="exampleFormControlInput1">Category Name</label>
                            <input name="category_name" type="text" class="form-control" id="exampleFormControlInput1"
                                placeholder="Entretainment">
                        </div>
                        <div class="form-group">
                            <label for="exampleFormControlInput1">Icon Name (see react native icons)</label>
                            <input name="icon_name" type="text" class="form-control" id="exampleFormControlInput1"
                                placeholder="umbrella">
                        </div>
                        <div class="form-group">
                            <label for="exampleFormControlSelect1">Icon Family</label>
                            <select name="icon_type" class="form-control" id="exampleFormControlSelect1">
                                <Option>AntDesign</Option>
                                <Option>Ionicons</Option>
                                <Option>Entypo</Option>
                                <Option>EvilIcons</Option>
                                <Option>Feather</Option>
                                <Option>FontAwesome</Option>
                                <Option>FontAwesome5</Option>
                                <Option>Foundation</Option>
                                <Option>MaterialIcons</Option>
                                <Option>MaterialCommunityIcons</Option>
                                <Option>Octicons</Option>
                                <Option>Roboto</Option>
                                <Option>rubicon-icon-font</Option>
                                <Option>SimpleLineIcons</Option>
                                <Option>Zocial</Option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-block btn-primary">
                            Insertar
                        </button>
                    </form>

                </div>
            </div>
        </div>
        <div class="col-md-8">
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>Category Name</th>
                        <th>Icon Name</th>
                        <th>Icon Type</th>
                        <th>Opciones</th>
                    </tr>
                </thead>
                <tbody>
                    <% categories.forEach(cat=>{ %>
<tr>
    <td> <%= cat.category_name %> </td>
    <td> <%= cat.icon_name %> </td>
    <td> <%= cat.icon_type %> </td>
    <td>
        <a href="/categories/delete/<%=cat._id%>" data-confirmation="Estás seguro?" class="btn btn-danger">Delete</a>
        <a href="/categories/edit/<%=cat._id%>" class="btn btn-info">Edit</a>
    </td>
</tr>
<% }) %>

</tbody>
<tfoot>
</tfoot>
</table>
</div>
</div>
</div>
<% include ../layout/foot %>