

{% if course.learner_can_retake? %}
  <form action="{% route course_retake, id: course.id %}" method="POST">
    {% form_authenticity_token %}
     <div class="course-overview-btn-container">
      <button type="submit" class="course-button">
           <div class="button-content-container">
        <div class="btn-text-container">
          {% t .retake, key: current_school.course_vocabulary %}
        </div>
        <span class="course-button-arrow">
          <svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0_7078_24243)">
            <path d="M17.3329 11.8773L12.4048 6.94903L13.7039 5.6499L20.8499 12.796L13.7039 19.9421L12.4048 18.643L17.3329 13.7148H6.1499V11.8773H17.3329Z" fill="#4F4C4E"/>
            </g>
            <defs>
            <clipPath id="clip0_7078_24243">
            <rect width="25.2" height="25.2" fill="white" transform="translate(0.899902 0.399902)"/>
            </clipPath>
            </defs>
            </svg>
        </span>
        </div>
      </button>
    </div>
  </form>
{% else %}
  <div class="course-overview-btn-container">
    <a
      class="course-button"
    {% if course.enrolled? %}
        href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
    {% else %}
        href="{% route course_enrollment, code: course.enrollment_code %}#reroute"
    {% endif %}
    >
      <div class="button-content-container">
        <div class="btn-text-container">
          {% if course.enrolled? == false %}
            {% t shared.course.start, key: current_school.course_vocabulary %}
          {% elsif course.started? == false %}
            {% t shared.course.start, key: current_school.course_vocabulary %}
          {% elsif course.completed? %}
            {% t shared.course.view, key: current_school.course_vocabulary %}
          {% else %}
            {% t shared.continue %}
          {% endif %}
        </div>
        <span class="course-button-arrow">
          <svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0_7078_24243)">
            <path d="M17.3329 11.8773L12.4048 6.94903L13.7039 5.6499L20.8499 12.796L13.7039 19.9421L12.4048 18.643L17.3329 13.7148H6.1499V11.8773H17.3329Z" fill="#4F4C4E"/>
            </g>
            <defs>
            <clipPath id="clip0_7078_24243">
            <rect width="25.2" height="25.2" fill="white" transform="translate(0.899902 0.399902)"/>
            </clipPath>
            </defs>
            </svg>
        </span>
      </div>
    </a>
  </div>
{% endif %}

<style>
  .course-button {
    padding: 13px;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    border:none;
    background:none;
    color:#242424;
  }
  .button-content-container {
    display: flex;
    border: 0.5px solid #242424;
    width: fit-content;
    align-items: center;
    }
    .btn-text-container {
    padding: 13px;
    border-right: 0.5px solid #242424;
    }
    .course-button-arrow {
    padding: 0 8px;
    }
</style>