{% load i18n %}
{% include 'pipeline/pipeline_tab.html' %}
{% if messages %}
<div class="oh-wrapper">
    {% for message in messages %}
    <div class="oh-alert-container">
        <div class="oh-alert oh-alert--animated {{message.tags}}">
        {{ message }}
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}
{% for rec in recruitment %}
<div class="oh-tabs__content " id="tab_rec_{{rec.id}}">
  <div class="ui-sortable">
    <div class="oh-kanban ui-sortable" id="stageDropTarget">
    {% for stage in rec.stage_set.all|dictsort:"sequence" %}
    <div
      class="oh-kanban__section "
      data-container='candidate'
      id="kanban{{stage.id}}"
      data-stage-id="{{stage.id}}"
      data-sequence = "{{stage.sequence}}"
      data-recruitment-id = "{{rec.id}}"
    >
      <div class="oh-kanban__section-head stage" style="cursor: pointer;" data-recruitment-id='{{rec.id}}'>
        <div class="d-flex">

          <span class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2">{{stage.active_candidates.all|length}}</span>
          <span class="oh-kanban__section-title" data-type="label"
          >{{stage}}</span>
        </div>
        <div class="oh-kanban__head-actions oh-kanban__dropdown" >
          <div class="oh-dropdown" x-data="{open: false}">
            <a class="ml-2" @click="open = !open">
              <ion-icon class="me-1" name="add-outline"></ion-icon>
            </a>
            <div
              class="oh-dropdown__menu oh-dropdown__menu--left w-25 oh-dropdown__filter p-4"
              x-show="open"
              @click.outside="open = false"
            >
              <form action="" class="" method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="oh-input-group">
                  <label for="desc" class="oh-label">{% trans "Name" %}</label>
                  {{candidate_form.name}}
                </div>
                <div class="oh-input-group">
                  <label for="job-position" class="oh-label">{% trans "Email" %}</label>
                  {{candidate_form.email}}
                </div>
                <div class="oh-input-group">
                  <label for="job-position" class="oh-label">{% trans "Phone" %}</label>
                  {{candidate_form.mobile}}
                </div>
                <div class="oh-input-group">
                  <label for="job-position" class="oh-label">{% trans "Resume" %}</label>
                  {{candidate_form.resume}}
                </div>
                <div class="oh-input-group">
                  <label for="job-position" class="oh-label">{% trans "Profile" %}</label>
                  {{candidate_form.profile}}
                </div>
                <input type="hidden" name="recruitment_id" id="" value="{{rec.id}}" />
                <input type="hidden" name="stage_id" id="" value="{{stage.id}}" />
                <button
                  type="submit"
                  class="oh-btn oh-d-hide oh-btn--small oh-btn--secondary oh-btn--add-advanced-tab w-100 mt-3 mb-2"
                >
                  <ion-icon class="me-1" name="add-circle-outline"></ion-icon>
                   {% trans "Candidate" %}
                </button>
              </form>
            </div>
          </div>

        </div>
      </div>

      <div class="oh-kanban__section-body ui-sortable" data-stage-id='{{stage.id}}' data-recruitment-id="{{rec.id}}">

        {% for cand in stage.active_candidates.all %}
        <div
          class="oh-kanban__card candidate"
          data-candidate-id="{{cand.id}}"
          data-recruitment-id ="{{rec.id}}"
          id="canididate-{{cand.id}}"
          style="cursor: pointer;"

        >
          <div class="oh-kanban__card-head">
            <div class="oh-profile oh-profile--md">
              <div class="oh-profile__avatar mr-1">
                <img
                  src="{{cand.get_avatar}}"
                  class="oh-profile__image"
                  alt=""
                />
              </div>
              <span
                class="oh-profile__name oh-text--dark"
                data-type="label"
                >{{cand}}</span
              >
            </div>
            <div class="oh-kanban__card-actions oh-kanban__dropdown">
              <button
                class="oh-btn oh-btn--small oh-btn--transparent oh-kanban__btn oh-kanban__dropdown-toggle"
              >
                <ion-icon
                  name="ellipsis-vertical-sharp"
                  role="img"
                  class="md hydrated"
                  aria-label="ellipsis vertical sharp"
                ></ion-icon>
              </button>

              <div class="oh-dropdown oh-kanban__dropdown-menu d-none">
                <div class="oh-dropdown__menu oh-dropdown__menu--right">
                  <ul class="oh-dropdown__items">
                    <li class="oh-dropdown__item">
                      <a
                        class="oh-dropdown__link oh-dropdown__link--secondary"
                        hx-get='{% url "send-mail" cand.id %}'
                        hx-target='#mail-content'
                        hx-swap='innerHTML'
                        style="cursor: pointer;"
                        data-toggle='modal'
                        data-target='#sendMail'
                        >{% trans "Send Mail" %}</a
                      >
                    </li>
                    <li class="oh-dropdown__item">
                      <a
                        class="oh-dropdown__link oh-dropdown__link--secondary"
                        hx-get='{% url "add-note" cand.id %}'
                        hx-target='#remark-content'
                        data-toggle="modal"
                        data-target="#addRemark"
                        >{% trans "Add Note" %}</a
                      >
                    </li>
                    <li class="oh-dropdown__item">
                      <a
                        class="oh-dropdown__link oh-dropdown__link--secondary oh-activity-sidebar__open"
                        hx-get='{% url "view-note" cand.id %}'
                        hx-target='#activitySidebar'
                        hx-swap="innerHTML"
                        data-target="#activitySidebar"
                        >{% trans "View Note" %}</a
                      >
                    </li>
                    <li class="oh-dropdown__item">
                      <a style="color: inherit;text-decoration: none;" class="oh-dropdown__link oh-dropdown__link--secondary" href="/media/{{cand.resume}}" target="_blank"
                        >{% trans "Resume" %}</a
                      >
                    </li>

                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="oh-kanban__card-footer">
            <span class="oh-kanban__card-footer-text oh-text--light"
              >{% trans "Candidate" %}</span
            >
          </div>
        </div>
        {% endfor %}
      </div>
    </div>

    {% endfor %}



    <div class="">
      {% include 'pipeline/form/stage_drop_down_form.html' %}

    </div>

  </div>
</div>
</div>
{% endfor %}