<template>
    <div class="git-div-container">
        <!--PLACE DESIGN HTML HERE-->
        <h3  class="fa fa-folder-open-o" style= "font-size:  30px;"> &nbsp;FORMS AND PERMITS</h3>
         <hr>
         <h3  style= "align-center: auto; font-size:  17px;"> &nbsp;&nbsp;&nbsp;APPLICATION PERMIT</h3>
           <table >
               
                <tr>
                       
                     <th>
                                        <div class="disp-style-row div-group">
                                                <button class="git-btn git-btn-info fa fa-address-card-o"></button>
                                                <div class="disp-style-col" style="margin-left: 8px; width: 140px">
                                                        <div class="div-group-text">
                                                             <p>GATEPASS  (GP)</p>
                                                        </div>
                                                               <div class="disp-style-row div-group-buttons">
                                                                <button class="btn-group-1">0</button>
                                                                <button class="btn-group-2">0</button>
                                                                <button class="btn-group-3">0</button>
                                                                </div>
                               
                                        </div>
                                  
                                             </div>
                                             </th>
                                             &nbsp;
                                             <th>
                                        <div class="disp-style-row div-group">
                                                <button class="git-btn git-btn-info fa fa-sign-out"></button>
                                                <div class="disp-style-col" style="margin-left: 8px; width: 140px">
                                                        <div class="div-group-text">
                                                             <p>PERMIT TO BRING_IN  (PBI)</p>
                                                        </div>
                                                               <div class="disp-style-row div-group-buttons">
                                                                <button class="btn-group-1">0</button>
                                                                <button class="btn-group-2">0</button>
                                                                <button class="btn-group-3">0</button>
                                                                </div>
                               
                                        </div>
                                  
                                             </div>
                                             </th>
                                              &nbsp;
                                             <th>
                                        <div class="disp-style-row div-group">
                                                <button class="git-btn git-btn-info fa fa-shopping-cart"></button>
                                                <div class="disp-style-col" style="margin-left: 8px; width: 140px">
                                                        <div class="div-group-text">
                                                             <p>LOCAL PURCHASE FORM  (LPF)</p>
                                                        </div>
                                                               <div class="disp-style-row div-group-buttons">
                                                                <button class="btn-group-1">0</button>
                                                                <button class="btn-group-2">0</button>
                                                                <button class="btn-group-3">0</button>
                                                                </div>
                               
                                        </div>
                                  
                                             </div>
                                             </th>
                                              &nbsp;
                                             <th>
                                        <div class="disp-style-row div-group">
                                                <button class="git-btn git-btn-danger fa fa-angle-double-right"></button>
                                                <div class="disp-style-col" style="margin-left: 8px; width: 140px">
                                                        <div class="div-group-text">
                                                             <p>APPLICATION FOR IMPORT PERMIT  (AIP)</p>
                                                        </div>
                                                               <div class="disp-style-row div-group-buttons">
                                                                <button class="btn-group-1">0</button>
                                                                <button class="btn-group-2">0</button>
                                                                <button class="btn-group-3">0</button>
                                                                </div>
                               
                                        </div>
                                  
                                             </div>
                                             </th>
                                      
                </tr>
                
              
                </table>
                 &nbsp;
                <table >
               
                <tr>
                       
                     <th>
                                        <div class="disp-style-row div-group">
                                                <button class="git-btn git-btn-danger fa fa-reply"></button>
                                                <div class="disp-style-col" style="margin-left: 8px; width: 140px">
                                                        <div class="div-group-text">
                                                             <p>PERMIT TO BRING_OUT:LOCAL ARTICLES  (PBO_LA)</p>
                                                        </div>
                                                               <div class="disp-style-row div-group-buttons">
                                                                <button class="btn-group-1">0</button>
                                                                <button class="btn-group-2">0</button>
                                                                <button class="btn-group-3">0</button>
                                                                </div>
                               
                                        </div>
                                  
                                             </div>
                                             </th>
                                             &nbsp;
                                             <th>
                                        <div class="disp-style-row div-group">
                                                <button class="git-btn git-btn-danger fa fa-reply"></button>
                                                <div class="disp-style-col" style="margin-left: 8px; width: 140px">
                                                        <div class="div-group-text">
                                                             <p>PERMIT TO BRING OUT:TEMPORARRY  (PBO_TT)</p>
                                                        </div>
                                                               <div class="disp-style-row div-group-buttons">
                                                                <button class="btn-group-1">0</button>
                                                                <button class="btn-group-2">0</button>
                                                                <button class="btn-group-3">0</button>
                                                                </div>
                               
                                        </div>
                                  
                                             </div>
                                             </th>
                                              &nbsp;
                                             <th>
                                        <div class="disp-style-row div-group">
                                                <button class="git-btn git-btn-success fa fa-car"></button>
                                                <div class="disp-style-col" style="margin-left: 8px; width: 140px">
                                                        <div class="div-group-text">
                                                             <p>PERMIT TO BRING OUT:TAX EXEMPT VEHICLE  (PBO_TEV)</p>
                                                        </div>
                                                               <div class="disp-style-row div-group-buttons">
                                                                <button class="btn-group-1">0</button>
                                                                <button class="btn-group-2">0</button>
                                                                <button class="btn-group-3">0</button>
                                                                </div>
                               
                                        </div>
                                  
                                             </div>
                                             </th>
                                              &nbsp;
                                             <th>
                                        <div class="disp-style-row div-group">
                                                <button class="git-btn git-btn-success fa fa-paper-plane"></button>
                                                <div class="disp-style-col" style="margin-left: 8px; width: 140px">
                                                        <div class="div-group-text">
                                                             <p>PERMIT TO BRING OUT:IMPORTED ARTICLE  (PBO_IA)</p>
                                                        </div>
                                                               <div class="disp-style-row div-group-buttons">
                                                                <button class="btn-group-1">0</button>
                                                                <button class="btn-group-2">0</button>
                                                                <button class="btn-group-3">0</button>
                                                                </div>
                               
                                        </div>
                                  
                                             </div>
                                             </th>
                                      
                </tr>
                
              
                </table> 
                 &nbsp;
                 <table >
               
                <tr>
                       
                     <th>
                                             <th>
                                        <div class="disp-style-row div-group">
                                                <button class="git-btn git-btn-success fa fa-newspaper-o"></button>
                                                <div class="disp-style-col" style="margin-left: 8px; width: 140px">
                                                        <div class="div-group-text">
                                                             <p>DECLARATION OF ADMISION OF ARTICLE  (DAA)</p>
                                                        </div>
                                                               <div class="disp-style-row div-group-buttons">
                                                                <button class="btn-group-1">0</button>
                                                                <button class="btn-group-2">0</button>
                                                                <button class="btn-group-3">0</button>
                                                                </div>
                               
                                        </div>
                                  
                                             </div>
                                             </th>
                                      
                </tr>
                
              
                </table>     
                        
</div>
   
</template>
<script>
    export default{
        data() {
            return {
                //DATA HERE
            }
        },
        mounted() {
        },
        methods: {
        }
    }
</script>
<style lang="css" scoped>
    .div-group {
        width: 270px ;
        height: 140px ;
        padding: 4px;
        cursor: pointer;
        box-shadow: 2px 3px 6px 1px rgba(0,0,0,0.27);
        -webkit-box-shadow: 2px 3px 6px 1px rgba(0,0,0,0.27);
        -moz-box-shadow: 2px 3px 6px 1px rgba(0,0,0,0.27);
    }
    
    
    .div-group:hover {
        color: #1976D2;
    }

    .div-group-text {
        font-weight: bold;
        padding: auto 0;
        height: 78px;
        display: flex;
    }
    
    .div-group-text p {
        margin: auto 0;
    }

    .div-group-buttons  {
        width: 140px;
        height: 30px;
        margin-top: 10px;
    }

    .div-group button[class*="git-btn"] {
        font-size: 60px;
        min-width: 100px;
        max-width: 100px;
        width: 100px !important;
    }

    .btn-group-2 {
        color: #fafafa;
        background-color: #990e0c;
    }

    .btn-group-1 {
        color: #fafafa;
        background-color: #43A047;
    }

    .btn-group-3 {
        color: #fafafa;
        background-color: #1E88E5;
    }

    .btn-group-1, .btn-group-2, .btn-group-3 {
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        border: 0px;
        border-radius: 2px;
        margin: 0 2px;
    }

</style>
// <script>
///    export default{
//         data() {
//             return {
//                 //DATA HERE
//                 groups: [
//                     {
//                         id: 0,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 1,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 3,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 4,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 5,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 6,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 7,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 8,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 9,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 0,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 1,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 3,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 4,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 5,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 6,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 7,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 8,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 9,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 0,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 1,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 3,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 4,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 5,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 6,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 7,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 8,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 9,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     }
//                 ]
//             }
//         },
//         mounted() {
//             this.$loading(true);
//             this.$loading(false);
//         },
//         methods: {
//         }
//     }
// </script>
<style lang="css" scoped>

</style>    