{% extends 'base_list.html.twig' %}

{% block title %}{% trans %}list_account{% endtrans %}{% endblock title %}

{% block stylesheets %}
  <!-- Font Awesome -->
  <link rel="stylesheet" href="{{ asset('front/plugins/fontawesome-free/css/all.min.css') }}">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- DataTables -->
  <link rel="stylesheet" href="{{ asset('front/plugins/datatables-bs4/css/dataTables.bootstrap4.css') }}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{{ asset('front/dist/css/adminlte.min.css') }}">  
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
  <!-- Favicon -->
	<link rel="shortcut icon" type="image/x-icon" href="{{ asset('front/images/favicon.png') }}">
{% endblock stylesheets %}

{% block body %}
<div class="wrapper">
  <!-- Navbar -->
    {{ include('pages/nav_portal.html.twig') }}
  <!-- /.navbar -->

  <!-- Main Sidebar Container -->
    {{ include('pages/menu_portal.html.twig') }}
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">{% trans %}list_account{% endtrans %}</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{{ path('portal-dashboard') }}">{% trans %}home{% endtrans %}</a></li>
              <li class="breadcrumb-item active">{% trans %}list_account{% endtrans %}</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>

    <!-- Main content -->
    <section class="content">
	<div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <div class="card card-primary card-outline">
              <div class="card-header">
                <h3 class="card-title">{% trans %}list_account{% endtrans %}</h3>
                <div class="card-tools">
                  <a href="{{ path('portal-create-account') }}">
                    <div class="btn btn-primary">
                      <i class="fas fa-plus"></i> {% trans %}new_account{% endtrans %}
                    </div>
                  </a>
                </div>
              </div> 
                <!-- /.card-header -->
              <div class="card-body">
                <table id="example1" class="table table-bordered table-striped">
                  <thead>
                    <tr>
                      <th>{% trans %}location{% endtrans %}</th>
                      <th>{% trans %}login{% endtrans %}</th>
                      <th>{% trans %}phone_number{% endtrans %}</th>
                      <th>{% trans %}package{% endtrans %}</th>
                      <th>{% trans %}price{% endtrans %}</th>
                      <th>{% trans %}expiry_date{% endtrans %}</th>
                      <th>{% trans %}actions{% endtrans %}</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for item in listEntity %}
                    <tr>
                      <td>{{ item.getLocation() }}</td>
                      <td>{{ item.getLogin() }}</td>
                      <td>{{ item.getPhoneNumber() }}</td>
                      <td>{{ item.getPackage() }}</td>
                      <td>{{ item.getPrice() }} €</td>
                      <td>{{ item.getExpiryDate().format("d/m/Y") }}</td>
                      <td>
                        <a href="{{ path('portal-edit-account', {id: item.getId()}) }}" class="fas fa-edit text-warning" title="{% trans %}update_account{% endtrans %}"></a>
                      </td>
                    </tr>
                    {% endfor %}
                  </tbody>
  
                  <tfoot>
                  <tr>
                    <th>{% trans %}location{% endtrans %}</th>
                    <th>{% trans %}login{% endtrans %}</th>
                    <th>{% trans %}phone_number{% endtrans %}</th>
                    <th>{% trans %}package{% endtrans %}</th>
                    <th>{% trans %}price{% endtrans %}</th>
                    <th>{% trans %}expiry_date{% endtrans %}</th>
                    <th>{% trans %}actions{% endtrans %}</th>
                  </tr>
                  </tfoot>
                </table>
              </div>
              <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
      </div>
      <!-- /.row -->      
    </section>
    <!-- /.content -->
  </div>
  <!-- /.control-sidebar -->
  <footer class="main-footer">
    <strong>Copyright &copy; 2014-2019 <a href="http://adminlte.io">AdminLTE.io</a>.</strong>
    All rights reserved.
    <div class="float-right d-none d-sm-inline-block">
      <b>Version</b> 3.0.0-rc.3
    </div>
  </footer>
</div>
<!-- ./wrapper -->
{% endblock body %}

{% block javascripts %}
    <!-- jQuery -->
    <script src="{{ asset('front/plugins/jquery/jquery.min.js') }}"></script>
    <!-- Bootstrap 4 -->
    <script src="{{ asset('front/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <!-- Bootstrap 4 -->
    <script src="{{ asset('front/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>    
    <!-- DataTables -->
    <script src="{{ asset('front/plugins/datatables/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('front/plugins/datatables-bs4/js/dataTables.bootstrap4.js') }}"></script>
    <!-- AdminLTE App -->
    <script src="{{ asset('front/dist/js/adminlte.js') }}"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="{{ asset('front/dist/js/demo.js') }}"></script>
<script>
  $(function () {
    $("#example1").DataTable();
    $('#example2').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false,
    });
  });
</script>    
{% endblock javascripts %}