{% extends 'admin/layout.html.twig' %}

{% set menu = 'admin_operation_mobile_select_manage' %}

{% set script_controller = 'operation/course-grid' %}


{% block main %}
<style>

.course-grids {
  margin:0 -15px 0 0;
  padding:0;
  list-style: none;
}

.course-grid {
  display: inline-block;
  vertical-align: top;
  margin: 15px 15px 15px 0;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
}

.course-grid .series-mode-label {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 12px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  background-color: #313131;
  color: #fff;
  opacity: 0;
}

.course-grid:hover .series-mode-label {
  opacity: 0.8;
}

.course-grid .series-mode-label:hover {
  opacity: 1;
}

.course-grid .grid-body {
  position: relative;
  width: 170px;
  display: block;
  /*overflow: hidden;*/
  border-radius: 4px;
  color: #353535;
}

.grid-body a{
  text-decoration: none;
}

.course-grid .title {
  display: block;
  padding: 10px;
  min-height: 52px;
  color: #555;
  font-weight: bold;
}

.course-grid .add-course {
  font-size: 80px;
  height: 148px;
  text-align: center;
  padding-top: 30px;
}

</style>
{% if setting("mobile.enabled") == 1 %}

{{ web_macro.flash_messages() }}

<form class="form-horizontal" id="mobile-form" method="post">

  <fieldset>

    <div class="help-block">{{'所选择的课程将会在客户端【每周精选】栏目中显示，最多选择三门。'|trans}}<br>
    </div>
    <div class="form-group">
      <input type='hidden' name="courseIds" value="{{mobile.courseIds}}"/>
      <div class="col-md-12" role="course-item-container">
        <ul class="course-grids">
          {% for course in courses|default(null) %}
          {% include 'admin/course/course-item.html.twig' with {course:course, showDelBtn:true} %}
          {% endfor %}
          <li class="course-grid related-course-grid" role="add-course" 
          style="cursor:pointer
          {% if courses|length >= 3 %}
          ;display:none
          {% endif %}
          "
          data-backdrop="static" data-toggle="modal" data-target="#modal" data-url="{{path('admin_course_search')}}">
            <i class="add-course grid-body glyphicon glyphicon-plus"></i>
          </li>
        </ul>
      </div>
    </div>
  </fieldset>

  <input type="hidden" name="_csrf_token" value="{{ csrf_token('site') }}">

  <button type="submit" class="btn btn-primary">{{'提交'|trans}}</button>
  
</form>

{% else %}
<div class="well" style="text-align:center;">


{{'移动端未开启'|trans}}，{{'请先在'|trans}}<a href="{{ path('admin_setting_mobile') }}"> {{'系统-课程设置-移动端设置'|trans}} </a>{{'中设置开启'|trans}}

</div>
{% endif %}

{% endblock %}