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

{% block title %}{% trans %}app_name{% endtrans %} | {% trans %}details{% endtrans %}{% endblock title %}

{% block body %}
  <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 %}details{% endtrans %}</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
              <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="{{ path('dashboard') }}">{% trans %}dashboard{% endtrans %}</a></li>
                <li class="breadcrumb-item active">{% trans %}details{% endtrans %}</li>
              </ol>
            </div><!-- /.col -->
          </div><!-- /.row -->
        </div><!-- /.container-fluid -->
      </div>
  
      <section class="content">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-3">

            <!-- Profile Image -->
            <div class="card card-primary card-outline">
              <div class="card-body box-profile">
                <strong>{% trans %}name{% endtrans %}</strong>
                <p class="text-muted">
                  {% trans %}name{% endtrans %}
                </p>			  
                <hr>
                <strong>{% trans %}creation_date{% endtrans %}</strong>
                <p class="text-muted">12 Mars 2020</p>
                <hr>
                <strong>{% trans %}comment{% endtrans %}</strong>
                <p class="text-muted">{% trans %}comment{% endtrans %}</p>
                <hr>
                <strong>{% trans %}status{% endtrans %}</strong>				
					      <p class="text-muted">{% trans %}status{% endtrans %}</p>
                <hr>
                <a href="" class="btn btn-primary btn-block"><b>{% trans %}update{% endtrans %}</b></a>
			        </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
            </div>
            <!-- /.col -->
            <div class="col-md-9">
              <div class="card">
                <div class="card-header p-2">
                  <ul class="nav nav-pills">
                    <li class="nav-item"><a class="nav-link active" href="#attachment" data-toggle="tab">{% trans %}added_documents{% endtrans %}</a></li>
                    <li class="nav-item"><a class="nav-link" href="#participant" data-toggle="tab">{% trans %}update{% endtrans %}</a></li>
                    <li class="nav-item"><a class="nav-link" href="#reflation" data-toggle="tab">{% trans %}update{% endtrans %}</a></li>
                    <li class="nav-item"><a class="nav-link" href="#comment" data-toggle="tab">{% trans %}comments{% endtrans %}</a></li>
                  </ul>
                </div><!-- /.card-header -->
                <div class="card-body">
                  <div class="tab-content">
                    <div class="active tab-pane" id="attachment">
              <div class="row">
                <div class="col-md-12 col-sm-12">
                  <div id="fileuploader" style="width: 100%">{% trans %}browse{% endtrans %}</div>
                  <input type="hidden" id="tag" name="tag" value="" />
                </div>					
            <div class="col-md-12 text-center">
              <a href="" class="btn btn-primary btn-block"><b>{% trans %}add{% endtrans %}</b></a>
            </div>				  
              <div class="col-sm-12">
              <table class="table table-bordered table-striped">
              <thead>
              <tr>
                <th>{% trans %}name{% endtrans %}</th>
                <th>{% trans %}company_name{% endtrans %}</th>
                <th>{% trans %}size{% endtrans %}</th>
                <th>{% trans %}add{% endtrans %}</th>
                <th>{% trans %}status{% endtrans %}</th>
                <th></th>
              </tr>
              </thead>
              <tbody>
                {% for item in listItem %}
              <tr>
                <td>{{ item["name"] }}</td>
                <td>{{ item["company_name"] }}</td>
                <td>'12563 Ko'</td>
                <td>{{ item["created"] }}</td>
                <td><div class="status badge badge-<?=$status;?> badge-pill badge-sm">{{ item["status"] }}</div></td>
                <td>
                <div class="btn-group">
                  <button type="button" class="btn btn-default">{% trans %}actions{% endtrans %}</button>
                  <div class="btn-group">
                    <button type="button" class="btn btn-default dropdown-toggle dropdown-icon" data-toggle="dropdown">
                    </button>
                    <div class="dropdown-menu">
                    <a class="dropdown-item" href="#" data-action="DOWNLOAD" data-value="">{% trans %}download{% endtrans %}</a>
                    <a class="dropdown-item" href="#" data-action="ON" data-value="">{% trans %}delete{% endtrans %}</a>
                    </div>
                  </div>
                </div>
                </td>
              </tr>
              {% endfor %}
              </tbody>

              </table>
              </div>
              </div>
                    </div>
                    <!-- /.tab-pane -->
                    <div class="tab-pane" id="participant">
              <div class="row">
              <div class="col-md-12">
              <form method="POST" action="">
              <div class="row">
              <div class="col-lg-12">
              <div class="form-group">
                <label>{% trans %}add{% endtrans %}</label>
                <input type="text" id="participant" class="form-control form-control-sm" placeholder="" />
                </div>
              </div>
              <div class="col-lg-12">
                <div class="float-right d-none d-sm-block">
                  <input type="submit" value="Envoyer" class="btn btn-success" /> 
                </div>		
              </div>
              </div>
            </form>
              </div>
              </div>
              <br />
              <div class="row">
              <div class="col-md-12">
              <table class="table table-striped">
              <thead>
              <tr>
              </tr>
              </thead>
              <tbody>
              </tbody>
              </table>						
              </div>
              </div>
                    </div>
                    <!-- /.tab-pane -->
                    <div class="tab-pane" id="reflation">
              <table class="table table-bordered table-striped">
              <thead>
              <tr>
              </tr>
              </thead>
              <tbody>
              <tr>						
              </tbody>
              </table>
                    </div>
                    <div class="tab-pane" id="comment">
            <!-- Post -->
                      <div class="post">
                        <div class="user-block">
                          <img class="img-circle img-bordered-sm" src="{{ asset('front/images/avatar/default-avatar.png') }}" alt="image">
                          <span class="username">
                            <a href="#">John dir</a>
                          </span>
                          <span class="description">12 mars 2020 à 12H30</span>
                        </div>
                        <!-- /.user-block -->
                        <p>test test</p>
                      </div>
                      <!-- /.post -->
                      <!-- Post -->
                      <div class="post clearfix">
                        <form method="POST" class="form-horizontal" action="">
                          <div class="input-group input-group-sm mb-0">
                            <input type="text" id="message" name="message" class="form-control form-control-sm" placeholder="Envoyer un message" />
                            <div class="input-group-append">
                              <input type="submit" value="Envoyer" class="btn btn-success" /> 
                            </div>
                          </div>
                        </form>
                      </div>
                      <!-- /.post -->
                    </div>
                    <!-- /.tab-pane -->
                  </div>
                  <!-- /.tab-content -->
                </div><!-- /.card-body -->
              </div>
              <!-- /.nav-tabs-custom -->
            </div>
            <!-- /.col -->
          </div>
          <!-- /.row -->
        </div><!-- /.container-fluid -->
      </section>
      <!-- /.content -->
  </div>
  <!-- /.control-sidebar -->
<!-- ./wrapper -->
{% endblock body %}