<div class="content-container">
    <div class="card">
        <div class="content">
            <div class="toolbar">
                <h4>System</h4>
            </div>
            <br>
            <div class="row">
                <div class="col-sm-6 col-md-6">
                    <div class="list-group">
                        <a class="list-group-item" href="#/datatables" has-permission='READ_DATATABLE'>
                            <h4 class="list-group-item-heading"><i class="fa fa-table fa fa-large"></i>&nbsp;&nbsp;{{'label.anchor.managedatatables'
                                | translate}}</h4>

                            <p class="list-group-item-text">{{'label.addnewextrafieldstoanyentityintheformofdatatable' |
                                translate}}</p>
                        </a>
                        <a class="list-group-item" href="#/codes" has-permission='READ_CODE'>
                            <h4 class="list-group-item-heading"><i class="fa fa-list-ul fa fa-large"></i>&nbsp;&nbsp;{{'label.anchor.managecodes'
                                | translate}}</h4>

                            <p class="list-group-item-text">{{'label.codesareusedtodefinedropdownvalues' | translate}}</p>
                        </a>
                        <a class="list-group-item" href="#/admin/roles" has-permission='READ_ROLE'>
                            <h4 class="list-group-item-heading"><i class="fa fa-key fa fa-large"></i>&nbsp;&nbsp;{{'label.anchor.manageroleandpermissions'
                                | translate}}</h4>

                            <p class="list-group-item-text">{{'label.defineormodifyrolesandassociatedpermissions' | translate}}</p>
                        </a>
                        <a class="list-group-item" href="#/admin/viewmctasks" has-permission='READ_PERMISSION'>
                            <h4 class="list-group-item-heading"><i class="fa fa-sitemap fa fa-large"></i>&nbsp;&nbsp;{{'label.anchor.configuremakercheckertask'
                                | translate}}</h4>

                            <p class="list-group-item-text">{{'label.defineormodifymakercheckertasks' | translate}}</p>
                        </a>
                        <a class="list-group-item" href="#/hooks" has-permission='READ_PERMISSION'>
                            <h4 class="list-group-item-heading"><i class="fa fa-anchor fa fa-large"></i>&nbsp;&nbsp;{{'label.anchor.managehooks'
                                | translate}}</h4>

                            <p class="list-group-item-text">{{'label.defineormodifyhooks' | translate}}</p>
                        </a>
                        <a class="list-group-item" href="#/entitytoentitymapping" has-permission='READ_PERMISSION'>
                            <h4 class="list-group-item-heading"><i class="fa fa-road fa fa-large"></i>&nbsp;&nbsp;{{'label.anchor.entitytoentitymapping'
                                | translate}}</h4>
                            <p class="list-group-item-text">{{'label.definemappings' | translate}}</p>
                        </a>
                        <a class="list-group-item" href="#/surveys" has-permission='READ_PERMISSION'>
                            <h4 class="list-group-item-heading"><i class="fa fa-file-text-o fa fa-large"></i>&nbsp;&nbsp;{{'label.anchor.managesurveys'
                                | translate}}</h4>
                            <p class="list-group-item-text">{{'label.managesurveys' | translate}}</p>
                        </a>
                    </div>
                </div>
                <div class="col-sm-6 col-md-6">
                    <div class="list-group">
                        <a class="list-group-item" href="#/audit" has-permission='READ_AUDIT'>
                            <h4 class="list-group-item-heading"><i class="fa fa-large fa fa-list-alt"></i>&nbsp;&nbsp;{{'label.anchor.audittrails'
                                | translate}}</h4>

                            <p class="list-group-item-text">{{'label.auditlogsofalltheactivities' | translate}}</p>
                        </a>
                        <a class="list-group-item" href="#/reports" has-permission='READ_REPORT'>
                            <h4 class="list-group-item-heading"><i class="fa fa-large fa fa-file-word-o"></i>&nbsp;&nbsp;{{'label.anchor.managereports'
                                | translate}}</h4>

                            <p class="list-group-item-text">{{'label.addnewreportand' | translate}}</p>
                        </a>
                        <a class="list-group-item" href="#/jobs" has-permission='READ_SCHEDULER'>
                            <h4 class="list-group-item-heading"><i class="fa fa-large fa fa-clock-o"></i>&nbsp;&nbsp;{{'label.anchor.schedulerjobs'
                                | translate}}</h4>

                            <p class="list-group-item-text">{{'label.scheduleajobmodifyjobs' | translate}}</p>
                        </a>
                        <a class="list-group-item" href="#/global" has-permission='READ_CONFIGURATION'>
                            <h4 class="list-group-item-heading"><i class="fa fa-large fa fa-gears"></i>&nbsp;&nbsp;{{'label.anchor.configuration'
                                | translate}}</h4>

                            <p class="list-group-item-text">{{'label.globalconfigurationsand' | translate}}</p>
                        </a>
                        <a class="list-group-item" href="#/accountnumberpreferences" has-permission='READ_PERMISSION'>
                            <h4 class="list-group-item-heading"><i class="fa fa-key fa fa-large"></i>&nbsp;&nbsp;{{'label.anchor.accountNumberPreferences'
                                | translate}}</h4>

                            <p class="list-group-item-text">{{'label.accountNumberPreferences' | translate}}</p>
                        </a>
                        <a class="list-group-item" href="#/externalservices" has-permission='READ_CONFIGURATION'>
                            <h4 class="list-group-item-heading"><i class="fa fa-large fa fa-cog"></i>&nbsp;&nbsp;{{'label.anchor.externalServices'
                                | translate}}</h4>

                            <p class="list-group-item-text">{{'label.externalServices' | translate}}</p>
                        </a>
                        <a class="list-group-item" href="#/twofactorconfig" has-permission='READ_CONFIGURATION'>
                            <h4 class="list-group-item-heading"><i class="fa fa-key fa fa-cog"></i>&nbsp;&nbsp;{{'label.anchor.twofactorconfig'
                                | translate}}</h4>

                            <p class="list-group-item-text">{{'label.twofactorconfig' | translate}}</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>