{% extends 'base.html.twig' %}
{% set addNew = path('new_candidate') %}

{% block body %}

<section id="content">
  <div class="assignmentDetail col-lg-12 col-md-12 col-xs-12 col-sm-8">
    <div class="col-lg-6 col-md-6 col-xs-12 col-sm-8">
      <h3><a class="btn disabled btn-success btn-xs" href="#" role="button">{{ assignment.status }}</a> {{ assignment.assignment }} </h3>
      <p><strong>Client: </strong> {{ assignment.client ? assignment.client.client : "- no client -" }} <br>
                      <strong>Notes:</strong> {{ assignment.notes }}</p>
      {% if assignment.jobDescription %}<p><strong>Job Description:</strong> <span class="add-read-more show-less-content">{{ assignment.jobDescription|nl2br }}</span><br>{% endif %}
      {% if assignment.jobDescriptionUrl %}<div style="margin-top: 5px;"><a href="{{ assignment.jobDescriptionUrl }}" target="_blank"><i class="fa fa-cloud-download" aria-hidden="true"></i> Job Description File</a></div>{% endif %}      
      </p>
    </div>
    <div class="col-lg-6 col-md-6 col-xs-12 col-sm-8 pull-right">

    <strong>{{ title }}</strong>:<a id="getTotalItemCount"> {{ results.getTotalItemCount }}</a> candidates.
          <a data-toggle="modal" href="{{ path('search_candidate', assignNewParams) }}" data-target="#widerModal" class="btn btn-sm btn-success"><i class="fa fa-plus"></i> Assign</a><small class="warning"></small>
        <br>
    {% if assignment.startDate %} <strong>Start Date:</strong> {{ assignment.startDate|date('d/m/Y') }} {% endif %}<br>
    {% if assignment.endDate %} <strong>End Date:</strong> {{ assignment.endDate|date('d/m/Y') }} {% endif %}
    {% if assignment.additionalRole %}  <br><p><strong>Additional Role Information</strong><span class="add-read-more show-less-content"> {{ assignment.additionalRole|nl2br }}</span><br>{% endif %}
    {% if assignment.additionalRoleUrl %} <div style="margin-top: 5px;"> <a href="{{ assignment.additionalRoleUrl }}" target="_blank"><i class="fa fa-cloud-download" aria-hidden="true"></i> Additional Role File</a></div>{% endif %}     
      </p>    
    </div>

  </div>
  {% include 'include/workspace-candidates-search-header.html.twig' %}

 </header>


  <section class="hbox stretch">
    <!-- .aside -->
    <aside class=" lter" id="listPage">
      <section class="vbox m-t-none">
        <section class="scrollable table-responsive col-lg-12 WsCandidateTable" id="mainTable">
            {% include 'parts/workspace-candidates-table.html.twig' %}
        </section>
      </section>
    </aside>
  </section>
  <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen" data-target="#nav"></a>
</section>

<style>
  .add-read-more.show-less-content .second-section,
  .add-read-more.show-less-content .read-less {
    display: none;
  }

  .add-read-more.show-more-content .read-more {
    display: none;
  }

  .add-read-more .read-more,
  .add-read-more .read-less {
    font-weight: normal;
    margin-left: 2px;
     color:#337ab7;
    cursor: pointer;
  }
</style>

<script>

$( document ).ready(function() {

   function AddReadMore() {
      //This limit you can set after how much characters you want to show Read More.
      var carLmt = 300;
      // Text to show when text is collapsed
      var readMoreTxt = " ...Read more";
      // Text to show when text is expanded
      var readLessTxt = " Read less";


      //Traverse all selectors with this class and manipulate HTML part to show Read More
      $(".add-read-more").each(function () {
         if ($(this).find(".first-section").length)
            return;

         var allstr = $(this).text();
         if (allstr.length > carLmt) {
            var firstSet = allstr.substring(0, carLmt);
            var secdHalf = allstr.substring(carLmt, allstr.length);
            var strtoadd = firstSet + "<span class='second-section'>" + secdHalf + "</span><span class='read-more'  title='Click to Show More'>" + readMoreTxt + "</span><span class='read-less' title='Click to Show Less'>" + readLessTxt + "</span>";
            $(this).html(strtoadd);
         }
      });

      //Read More and Read Less Click Event binding
      $(document).on("click", ".read-more,.read-less", function () {
         $(this).closest(".add-read-more").toggleClass("show-less-content show-more-content");
      });
   }

   AddReadMore();


});

</script>

{% endblock %}