Template source: profile/index.html

{% extends 'base.html' %}
{% load static %}
{% load filters %}


{% block content %}
      <main class="l-main l-2column c-main-lv2 p-profile-index">
        <div class="l-main__maincolumn">
          <section class="c-main-lv1__content p-profile-index__content">
            <div class="c-main-lv1__content__inner">
              <section class="p-profile-index__mainvisual">
                {% for image_form in images_forms %}
                      {% if image_form.instance and image_form.instance.image %}
                      <div data-role="image-upload-{{ forloop.counter0 }}"
                           class="p-profile-index__mainvisual__img p-profile-index__mainvisual__img--lv1 profile-img-{{ forloop.counter0 }}">
                        <div class="img-cut">
                            <img src="{{ image_form.instance.image.url }}" class="profile-img-count" alt="画像">
                        </div>
                      </div>
                      <!-- プロフィール写真モーダル -->
                      <div class="profile_image_modal over-lay" style="display: none" id="modal-profile-bg-{{ forloop.counter0 }}">
                          <div class="follow-release">
                              <div class="modal">
                                  <div class="p-profile-index__mainvisual__img p-profile-index__mainvisual__img--lv1">
                                      <div class="img-cut">
                                          <img src="{{ image_form.instance.image.url }}" alt="画像">
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <!-- プロフィール写真モーダル -->
                      {% endif %}
                {% endfor %}
              </section>
              <section class="p-profile-index__section-lv1">
                <div class="p-profile-index__section-lv1__name">
                  <span class="item-lv1" style="font-family: 'Copperplate';">{{ user_info.first_name_en }} {{ user_info.last_name_en }}</span>
                  <p class="item-lv2">{{ user_info.last_name }} {{ user_info.first_name }}</p>
                </div>
                <div class="p-profile-index__section-lv1__wrapper">
                  <div class="p-profile-index__section-lv1__category">
                    <div class="p-profile-index__section-lv1__category__box-lv1">
                      <div class="icon">
                        <img src="{% static 'images/common/ic-job-g.svg' %}" alt="job">
                      </div>
                      <span class="detail" style="font-size: 0.9rem;">ジョブ</span>
                    </div>
                    <div class="p-profile-index__section-lv1__category__box-lv2">
                      <span class="title">{{ user_job }}</span>
                      <span class="detail">{{ user_job_en }}</span>
                    </div>
                  </div>
                  <div class="p-profile-index__section-lv1__follower">
                  <a href="{% url 'follower' slug=user_info.username %}">
                    <span class="title">follower</span>
                    <span class="number">{{ profile.follower_total }}</span>
                  </a>
                  </div>
                {% if request.user.is_authenticated %}
                <form method="post" action="">
                    {% csrf_token %}
                  {% if user_info.pk == user.id %}
                    <a href="{% url 'accounts:profile' %}"><input type="button" class="p-profile-index__section-lv1__follow-btn" value="編集する"></a>
                  {% elif following %}
                  <div class="p-profile-index__section-lv1__follow-btn following profile_un_follow">
                    <span class="view-default">フォロー中</span>
                    <span class="view-hover">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  </div>
                  <!-- 解除ボタンが押されたらポップアップ -->
                  <div class="over-lay prof_modal" style="display: none" id="modal-bg-prof">
                    <div class="follow-release">
                      <div id="modal-content">
                          <ul class="wrap">
                              <li class="prof-card">
                                  <div class="prof-card__inner">
                                      <div class="img">
                                        <span class="img-cut">
                                        {% with user_info.get_avatar as avatar %}
                                        {% if avatar %}
                                            <img alt="{{ user_info.username }}" src="{{ avatar }}">
                                        {% else %}
                                            <img src="{% static 'images/common/vistarcard_back.png' %}" alt="">
                                        {% endif %}
                                        {% endwith %}
                                        </span>
                                      </div>
                                      <div class="content">
                                          <div class="head head_content">
                                              <div class="name-box">
                                                <span class="en_name" style="margin:0;">{{ user_info.last_name_en|default_if_none:'' }}&nbsp; {{ user_info.first_name_en }}</span><br>
                                                <span class="name" style="margin-top:0; padding-top: 0;">{{ user_info.last_name|default_if_none:'' }}&nbsp; {{ user_info.first_name }}</span>さん
                                                <span class="age" style="margin-top:0; padding-top: 0;">
                                                    <span>
                                                        {% if profile.age_public and profile.birthday %}
                                                            {{ profile.birthday|age_calculation|default_if_none:''  }}{% elif profile.age_public and profile.age %}
                                                            {{ profile.age|default_if_none:'' }}{% else %}
                                                        {% endif %}
                                                    </span></span>
                                              </div>
                                          </div>
                                          <div class="detail detail_content">
                                              <div class="job-box">
                                                <div class="job-box__box-lv1">
                                                  <div class="icon">
                                                    <img src="{% static 'images/common/ic-job-b.svg' %}" alt="job">
                                                  </div>
                                                </div>
                                                <div class="job-box__box-lv2" style="line-height: 1.4">
                                                    <span class="title">{{ user_job }}</span>
                                                    <span class="detail">{{ user_job_en }}</span>
                                                </div>
                                              </div>
                                              <div class="area-box">
                                            <div class="icon">
                                              <img src="{% static 'images/common/ic-area-b.svg' %}" alt="area">
                                            </div>
                                            <div class="area-box__box-lv1">
                                              <span class="title">
                                                  {% if profile.active_area_public %}
                                                      {% for rec in profile.active_area.all %}
                                                          {{ rec }}
                                                      {% endfor %}
                                                      {% if profile.use_other_active_area %}
                                                          {{ profile.other_active_area|default_if_none:'' }}
                                                      {% else %}
                                                      {% endif %}
                                                  {% else %}
                                                      非公開
                                                  {% endif %}
                                              </span>
                                            </div>
                                          </div>
                                          </div>
                                      </div>
                                  </div>
                              </li>
                          </ul>
                          <div class="message">
                            <p id="un-follow-name">本当に、{{ user_info.last_name|default_if_none:'' }}&nbsp; {{ user_info.first_name }}さんのフォローを解除してもよろしいですか?</p>
                            <div class="release">
                                <input type="hidden" name="unfollow_user" value="{{ user_id }}">
                                <button class="forrow-btn release__btn">フォローを解除する
                                </button>
                            </div>
                          </div>
                      </div>
                    </div>
                  </div>
                  <!-- 解除ボタンが押されたらポップアップ -->
                  {% else %}
                    <input type="hidden" name="following_user" value="{{ user_id }}">
                    <input type="submit" class="p-profile-index__section-lv1__follow-btn" id="following" value="フォロー">
                  {% endif %}
                </form>
                {% else %}
                    <input type="submit" class="p-profile-index__section-lv1__follow-btn" id="following" onclick="window.location='{%url 'login' %}'" value="フォロー">
                {% endif %}
                    <div class="p-profile-index__section-lv1__follow-number">
                     {% if profile.is_open_following_list %}
                        <a href="{% url 'following' slug=user_info.username %}">
                          <span class="title">following</span>
                          <span class="number">{{ profile.following_total }}</span>
                        </a>
                     {% else %}
                        <span class="seclet"><img src="{% static 'images/common/ic-seclet-g.svg' %}"></span>
                     {% endif %}
                    </div>
                </div>
              </section>
              <div class="c-main-lv1__content__area">
                <div class="c-main-lv1__content__area__inner">
                  <section class="p-profile-index__section-lv2">
                    <section class="p-profile-index__section-lv2__group">
                      <h1 class="p-profile-index__section-lv2__title">プロフィール</h1>
                      <dl class="p-profile-index__section-lv2__list">
                        <div class="inner">
                          <dt class="theme sex">性別</dt>
                          {% if profile.gender_public %}
                            <dd class="item">{{ profile.get_gender_display|default_if_none:'' }}</dd>
                           {% else %}
                            <dd class="item">非公開</dd>
                          {% endif %}
                        </div>
                        <div class="inner">
                          <dt class="theme age">年齢</dt>
                          {% if profile.age_public and profile.birthday %}
                              <dd class="item">{{ profile.birthday|age_calculation|default_if_none:'' }}</dd>
                          {% elif profile.age_public and profile.age %}
                              <dd class="item">{{ profile.age|default_if_none:'' }}</dd>
                          {% else %}
                              <dd class="item">非公開</dd>
                          {% endif %}
                        </div>
                        <div class="inner">
                          <dt class="theme height">身長</dt>
                          {% if profile.tall_public %}
                              {% if profile.tall %}
                                 <dd class="item">{{ profile.tall|default_if_none:'' }}cm</dd>
                              {% else %}
                              {% endif %}
                          {% else %}
                             <dd class="item">非公開</dd>
                          {% endif %}
                        </div>
                        <div class="inner ">
                          <dt class="theme area">主な活動エリア</dt>
                          <dd class="item" id="active_area_space">
                          {% if profile.active_area_public %}
                              {% for rec in profile.active_area.all %}{{ rec }}
                              {% endfor %}
                               {% if profile.other_active_area %}{{ profile.other_active_area|default_if_none:'' }}
                                {% else %}
                                {% endif %}
                          {% else %}
                              <dd class="item">非公開</dd>
                          {% endif %}
                          </dd>
                        </div>
                        <div class="inner">
                          <dt class="theme citizenship">国籍</dt>
                          {% if profile.nationality_public %}
                              <dd class="item">{{ profile.nationality|default_if_none:'' }}</dd>
                          {% else %}
                              <dd class="item">非公開</dd>
                          {% endif %}
                        </div>
                        <div class="inner">
                          <dt class="theme education">学歴</dt>
                          {% if profile.education_public %}
                              <dd class="item">{{ profile.education }}</dd>
                          {% else %}
                              <dd class="item">非公開</dd>
                          {% endif %}
                        </div>
                        <div class="inner">
                          <dt class="theme hobby">趣味</dt>
                          {% if profile.hobby_public %}
                              <dd class="item">{{ profile.hobby }}</dd>
                          {% else %}
                              <dd class="item">非公開</dd>
                          {% endif %}
                        </div>
                      </dl>
                    </section>
                    <section class="p-profile-index__section-lv2__group">
                      <h1 class="p-profile-index__section-lv2__title">スキル</h1>
                      <dl class="p-profile-index__section-lv2__list">
                        <div class="inner">
                          <dt class="theme theme--circle">特技</dt>
                          {% if profile.skill_public %}
                              <dd class="item">{{ profile.skill }}</dd>
                          {% else %}
                              <dd class="item">非公開</dd>
                          {% endif %}
                        </div>
                        <div class="inner">
                          <dt class="theme theme--circle">資格・免許</dt>
                          {% if profile.qualification_public %}
                              <dd class="item">{{ profile.qualification|linebreaksbr }}</dd>
                          {% else %}
                              <dd class="item">非公開</dd>
                          {% endif %}
                        </div>
                        <div class="inner">
                          <dt class="theme theme--circle">言語</dt>
                        {% if is_language_publics %}
                              {% for user_language in user_languages %}
                                  {% if  user_language.get_language_skill_display %}
                                      <dd class="item">{{ user_language.get_language_display|default_if_none:'' }} <span class="language_skill_check" style="font-size: 10px; font-color: #444444;">({{ user_language.get_language_skill_display|default_if_none:'' }})</span></dd>
                                  {% elif user_language.language_public %}
                                    <dd class="item">{{ user_language.get_language_display|default_if_none:'' }}</dd>
                                  {% else %}
                                  {% endif %}
                              {% endfor %}
                        {% else %}
                              <dd class="item">非公開</dd>
                        {% endif %}
                        </div>
                      </dl>
                    </section>
                    <section class="p-profile-index__section-lv2__group">
                      <h1 class="p-profile-index__section-lv2__title">SNS</h1>
                      <div class="p-profile-index__section-lv2__wrap">
                        <div class="p-profile-index__section-lv2__wrap__list">
                          {% if profile.instagram_url %}
                              <a href="{{ profile.instagram_url|create_instagram_url|default_if_none:'' }}" class="sns" target="_blank"><img src="{% static 'images/common/ic-instagram.svg' %}" alt="instagram"/></a>
                          {% else %}
                              <a class="sns"><img src="{% static 'images/common/ic-instagram.svg' %}" alt="instagram"/></a>
                          {% endif %}
                          {% if profile.facebook_url %}
                              <a href="{{ profile.facebook_url|default_if_none:'' }}" class="sns" target="_blank"><img src="{% static 'images/common/ic-facebook.svg' %}" alt="facebook"/></a>
                          {% else %}
                              <a class="sns"><img src="{% static 'images/common/ic-facebook.svg' %}" alt="facebook"/></a>
                          {% endif %}
                          {% if profile.twitter_url %}
                              <a href="{{ profile.twitter_url|create_twitter_url|default_if_none:'' }}" class="sns" target="_blank"><img src="{% static 'images/common/ic-twitter.svg' %}" alt="twitter"/></a>
                          {% else %}
                              <a class="sns"><img src="{% static 'images/common/ic-twitter.svg' %}" alt="twitter"/></a>
                          {% endif %}
                          {% if profile.youtube_url %}
                              <a href="{{ profile.youtube_url|default_if_none:'' }}" class="sns" target="_blank"><img src="{% static 'images/common/ic-youtube.svg' %}" alt="youtube"/></a>
                          {% else %}
                              <a class="sns"><img src="{% static 'images/common/ic-youtube.svg' %}" alt="youtube"/></a>
                          {% endif %}
{#                          {% if profile.line_url %}#}
{#                              <a href="{{ profile.line_url|default_if_none:'' }}" class="sns" target="_blank"><img src="{% static 'images/common/ic-line.svg' %}" alt="line"/></a>#}
{#                          {% else %}#}
{#                              <a class="sns"><img src="{% static 'images/common/ic-line.svg' %}" alt="line"/></a>#}
{#                          {% endif %}#}
                          {% if profile.other_url %}
                          <div class="url true_url">
                            <img src="{% static 'images/common/ic-website.svg' %}" alt="website"/>
                            <a href="{{ profile.other_url }}" target="_blank">{{ profile.other_url|default_if_none:'' }}</a>
                          </div>
                          {% else %}
                          <div class="url">
                            <img src="{% static 'images/common/ic-website.svg' %}" alt="website"/>
                            <a href="{{ profile.other_url }}" target="_blank">{{ profile.other_url|default_if_none:'' }}</a>
                          </div>
                          {% endif %}
                        </div>
                      <form method="post" id="form-contact">
                          {% csrf_token %}
                        <div class="p-profile-index__section-lv2__wrap__card-download">
                          <input type="hidden" name="download" value="Vistarカード">
                          <a class="btn" id="btn-submit"><span>Vistarカード</span></a>
                        </div>
                      </form>
                    </section>
                  </section>

                  <!-- SNSボタン -->
                  <section class="align__right">
                    <div class="p-profile-index__section-lv2__wrap__list">
                        <div class="fb-share-button" data-href="{{ profile_url }}" data-layout="button" data-size="large" data-mobile-iframe="true">
                          <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2F127.0.0.1%3A8000%2Fvistar02%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">シェア</a>
                        </div>
                        <a class="twitter-share-button"
                            href="https://twitter.com/share"
                            data-size="large"
                            data-url="{{ profile_url }}"
                            data-related="twitterapi,twitter"
                            data-hashtags="Vistar"
                            data-text="Vistar {{ user_info.username }} さんのプロフィールをツイートする"
                            data-size="large"
                            data-lang="ja"
                            data-dnt="true">
                        </a>
                        <a class="line_background line_url" href=""></a>
                    </div>
                  </section>

                  <section class="p-profile-index__section-lv3">
                    <a href="" class="p-profile-index__section-lv3__linkto current">
                      <span class="item">経歴</span>
                    </a>
                    <a href="{% url 'gallery' slug=user_info.username %}" class="p-profile-index__section-lv3__linkto">
                      <span class="item">ギャラリー</span>
                    </a>
                    <a href="" class="p-profile-index__section-lv3__linkto commingsoon">
                      <span class="caution">COMMING SOON</span>
                      <span class="item">タイムライン</span>
                    </a>
                  </section>

                    {% if job_histories %}
                      <section class="p-profile-index__section-lv4">

                    {% if awards %}
                        <h1 class="p-profile-index__section-lv4__title">経歴</h1>
                        <section class="p-profile-index__section-lv4__group">
                          <h2 class="p-profile-index__section-lv4__group__title">
                            <span class="item-lv1"></span>
                            <span class="item-lv1_text">受賞歴 / 実績</span>
                          </h2>

                          <div class="p-profile-index__section-lv4__group__wrap">

                        {% for user_award in user_awards %}
                            <div class="p-profile-index__section-lv4__group__box-lv1">
                              <span class="category">{{ user_award.get_type_display|default_if_none:'' }}</span>
                              <h2 class="title">{{ user_award.contest_name|default_if_none:'' }}</h2>
                            </div>
                            <div class="p-profile-index__section-lv4__group__box-lv2">
                              <time class="item-lv1">{{ user_award.time|default_if_none:'' }}</time>
                              <p class="item-lv2">{{ user_award.award_title|linebreaksbr|default_if_none:'' }}</p>
                            </div>
                        {% endfor %}
                      </div>
                    </section>
                    {% endif %}

                    {% if appears %}
                        <section class="p-profile-index__section-lv4__group">
                          <h2 class="p-profile-index__section-lv4__group__title">
                            <span class="item-lv2"></span>
                            <span class="item-lv2_text">出演歴</span>
                          </h2>
                          <div class="p-profile-index__section-lv4__group__wrap">
                            {% for user_appear in user_appears %}
                                <div class="p-profile-index__section-lv4__group__box-lv1">
                                  <span class="category">{{ user_appear.get_type_display|default_if_none:'' }}</span>
                                  <h2 class="title">{{ user_appear.title|default_if_none:'' }}</h2>
                                </div>
                                <div class="p-profile-index__section-lv4__group__box-lv2">
                                  <time class="item-lv1">{{ user_appear.time|default_if_none:'' }}</time>
                                  <p class="item-lv2">{{ user_appear.content|linebreaksbr|default_if_none:'' }}</p>
                                </div>
                            {% endfor %}
                          </div>
                        </section>
                    {% endif %}

                  </section>
                    {% else %}
                    {% endif %}
                  <section class="p-profile-index__section-lv5">

                  {% if profile.introduction %}
                    <h1 class="p-profile-index__section-lv5__title">活動紹介文</h1>
                        <section class="p-profile-index__section-lv5__group">
                          <p class="detail">{{ profile.introduction|linebreaksbr|default_if_none:'' }}</p>
                        </section>
                  {% endif %}

                    {% for user_media in user_medias %}
                        {% if user_media.type == 1 %}
                        <h1 class="p-profile-index__section-lv5__title">活動紹介({{ user_media.get_type_display }}</h1>
                            <section class="p-profile-index__section-lv5__group">
                              <h2 class="title">{{ user_media.title|default_if_none:'' }}</h2>
                                  <div class="content video">
                                    <!-- youtube -->
                                      {%  if user_media.url|embed %}
                                        <iframe src="{{ user_media.url|embed }}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                      {% else %}
                                        <center><h1>Youtubeの動画リンクが貼られていません</h1></center>
                                      {% endif %}
                                  </div>
                                  <p class="detail">{{ user_media.text|linebreaksbr|default_if_none:'' }}</p>
                            </section>
                        {% elif user_media.type == 2 %}
                        <h1 class="p-profile-index__section-lv5__title">活動紹介({{ user_media.get_type_display }}</h1>
                            <section class="p-profile-index__section-lv5__group">
                              <h2 class="title">{{ user_media.title|default_if_none:'' }}</h2>
                              <div class="content music">
                                <!-- soundcloud -->
                                  {% if user_media.url|embed_sound %}
                                    <iframe width="100%" height="450" scrolling="no" frameborder="0" allow="autoplay" src="{{ user_media.url|embed_sound }}"></iframe>
                                  {% else %}
                                    <center><h1>SoundCloudの音源リンクが貼られていません</h1></center>
                                  </div>
                                  {% endif %}
                              <p class="detail">{{ user_media.text|linebreaksbr|default_if_none:'' }}</p>
                            </section>
                        {% elif user_media.type == 3 %}
                        <h1 class="p-profile-index__section-lv5__title">活動紹介({{ user_media.get_type_display }}</h1>
                            <section class="p-profile-index__section-lv5__group">
                              <h2 class="title">{{ user_media.title|default_if_none:'' }}</h2>
                              <div class="img-cut">
                                <!-- img -->
                                {% if user_media.image %}
                                    <img src="{{ user_media.image.url }}" alt="" />
                                {% endif %}
                              </div>
                              <p class="detail">{{ user_media.text|linebreaksbr|default_if_none:'' }}</p>
                        </section>
                        {% else %}
                        {% endif %}
                    {% endfor %}
                  </section>

             </div>
            </div>
          </section>
          <!-- プロフィール追従 -->
          <div class="p-profile-index__fixed-content">
            <div class="p-profile-index__fixed-content__inner">
              <div class="img">
                <span class="img-cut">
                {% with user_info.get_avatar as avatar %}
                {% if avatar %}
                    <img alt="{{ user_info.username }}" src="{{ avatar }}">
                {% else %}
                    <img src="https://placehold.jp/200x300.png" alt="">
                {% endif %}
                {% endwith %}
                </span>
              </div>
              <div class="content">
                <div class="left">
                  <div class="name-box" style="padding-top:15px;">
                    <span class="name">{{ user_info.last_name|default_if_none:'' }}&nbsp;{{ user_info.first_name }}</span>さん<span class="age"><span>{% if profile.age_public and profile.birthday %}{{ profile.birthday|age_calculation|default_if_none:''  }}{% elif profile.age_public and profile.age %}{{ profile.age|default_if_none:''  }}{% else %}{% endif %}</span></span>
                  </div>
                  <div class="job-box" style="padding-top:15px;">
                    <div class="job-box__box-lv1">
                      <div class="icon">
                        <img src="{% static 'images/common/ic-job-b.svg' %}" alt="job">
                      </div>
                    </div>
                    <div class="job-box__box-lv2">
                      <span class="title">{{ user_job }}</span>
                      <span class="detail">{{ user_job_en }}</span>
                    </div>
                  </div>
                  <div class="area-box" style="padding-top:10px;">
                    <div class="icon">
                      <img src="{% static 'images/common/ic-area-b.svg' %}" alt="area">
                    </div>
                    <div class="area-box__box-lv1">
                      <span class="title">
                          {% if profile.active_area_public %}
                              {% for rec in profile.active_area.all %}
                                  {{ rec }}
                              {% endfor %}
                              {% if profile.use_other_active_area %}
                                  {{ profile.other_active_area|default_if_none:'' }}
                              {% else %}
                              {% endif %}
                          {% else %}
                              非公開
                          {% endif %}
                      </span>
                    </div>
                  </div>
                </div>
                <div class="right">
                  <div class="follower">
                    <span class="label">
                      follower
                    </span>
                    <a href="{% url 'follower' slug=user_info.username %}">
                      <div class="count">{{ profile.follower_total }}</div>
                    </a>
                  {% if request.user.is_authenticated %}
                    <form method="post">
                    {% csrf_token %}
                      {% if user_info.pk == user.id %}
                      {% elif following %}
                          <div class="p-profile-index__section-lv1__follow-btn following profile_un_follow">
                            <span class="view-default">フォロー中</span>
                            <span class="view-hover">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                          </div>
                      {% else %}
                        <input type="hidden" name="following_user" value="{{ user_id }}">
                        <input type="submit" class="p-profile-index__section-lv1__follow-btn" id="following" value="&nbsp;フォロー&nbsp;">
                      {% endif %}
                    </form>
                  {% else %}
                      <input type="submit" class="p-profile-index__section-lv1__follow-btn" id="following" onclick="window.location='{%url 'login' %}'" value="&nbsp;フォロー&nbsp;">
                  {% endif %}
                      <div class="mini_profile_sns_button">
                          <div class="mini_profile_facebook_button mini_profile_sns_button_item" data-href="{{ profile_url }}" data-layout="button" data-size="large" data-mobile-iframe="true">
                              <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2F127.0.0.1%3A8000%2Fvistar02%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">
                                  <img class="mini_profile_sns_icon" src="{% static 'images/common/ic-facebook.svg' %}" alt="facebook"/>
                              </a>
                          </div>
                          <div class="mini_profile_twitter_button mini_profile_sns_button_item">
                              <a href="https://twitter.com/share"
                                 data-url="{{ profile_url }}"
                                 data-related="twitterapi,twitter"
                                 data-hashtags="Vistar"
                                 data-text="Vistar {{ user_info.username }} さんのプロフィールをツイートする"
                                 data-size="large"
                                 data-lang="ja"
                                 data-dnt="true"
                              >
                                  <img class="mini_profile_sns_icon" src="{% static 'images/common/ic-twitter.svg' %}" alt="twitter"/>
                              </a>
                          </div>
                          <div class="mini_profile_line_button mini_profile_sns_button_item">
                              <a class="line_url" href="">
                                  <img class="mini_profile_sns_icon" src="{% static 'images/common/round-default.png' %}" alt="line"/>
                              </a>
                          </div>
                      </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- プロフィール追従 -->
        </div>
      </main>
    <!-- 解除ボタンが押されたらポップアップ -->
      <div class="over-lay" style="display: none" id="modal-bg">
        <div class="follow-release">
          <div id="modal-content" class="modal">
          <div class="p-search__section__mainvisual">
            <div id="custom-content" class="p-profile-index__mainvisual__img p-profile-index__mainvisual__img--lv1">
              <div class="img-cut">
              {% with user_info.get_avatar as avatar %}
                {% if avatar %}
                   <img alt="{{ user_info.username }}" src="{{ avatar }}">
                    {% else %}
                    <img src="https://placehold.jp/3d4070/ffffff/200x300.png" alt=""/>
                {% endif %}
                {% endwith %}
                  </div>
                </div>
                  <div class="img_custom">
                      <img src="{% static 'images/common/vistar-logo-w.svg' %}">
                  </div>
                  <div class="qr_custom">
                      <img src="{{ qrcode }}">
                  </div>

                <div class="p-search__section__mainvisual__overlay">
                  <span class="p-search__section__mainvisual__overlay__eng" style="font-family: 'Copperplate'; text-shadow: 1px 1px 0 #000">{{ user_info.first_name_en }} {{ user_info.last_name_en }}</span>
                  <div class="p-search__section__mainvisual__overlay__box-lv1">
                    <span class="p-search__section__mainvisual__overlay__box-lv1__name" style="text-shadow: 1px 1px 0 #000">{{ user_info.last_name }} {{ user_info.first_name }}</span>
                    <span class="p-search__section__mainvisual__overlay__box-lv1__age" style="text-shadow: 1px 1px 0 #000">
                        {% if user_info.profile.age_public and user_info.profile.birthday %}
                          {{ user_info.profile.birthday|age_calculation|default_if_none:'' }}{% elif user_info.profile.age_public and user_info.profile.age %}
                          {{ user_info.profile.age|default_if_none:'' }}{% endif %}</span>
                  </div>
              <div class="p-search__section__mainvisual__overlay__box-lv2">
                <div class="p-search__section__mainvisual__overlay__box-lv2__img">
                  <img src="{% static "images/common/ic-job-w.svg" %}" alt="">
                </div>
                <div class="p-search__section__mainvisual__overlay__box-lv2__detail">
                    {% if user_info.profile and user_info.profile.job %}
                        <span style="text-shadow: 1px 1px 0 #000">{{ user_info.profile.job.name }}</span>
                        <span style="text-shadow: 1px 1px 0 #000">{{ user_info.profile.job.name_en }}</span>
                    {% endif %}
                </div>
              </div>
            </div>
          </div>
            <div class="c-review__foot">
              <button id="btn-confim-submit" class="c-review__foot__button c-review__foot__button--lv1">ダウンロード</button>
            </div>
          </div>
        </div>

      </div>
      <!-- 解除ボタンが押されたらポップアップ -->
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.2"></script>
    <script>
    $( function() {
        // 0番目のprofile写真
        $(".profile-img-0").click(function (e) {
            e.stopImmediatePropagation();
            var $modal =  $("#modal-profile-bg-0");
            $(".p-profile-index__fixed-content").css('display', 'none');
            $modal.fadeIn("slow");
        });
        // 1番目のprofile写真
        $(".profile-img-1").click(function (e) {
            e.stopImmediatePropagation();
            var $modal =  $("#modal-profile-bg-1");
            $(".p-profile-index__fixed-content").css('display', 'none');
            $modal.fadeIn("slow");
        });
        // 2番目のprofile写真
        $(".profile-img-2").click(function (e) {
            e.stopImmediatePropagation();
            var $modal =  $("#modal-profile-bg-2");
            $(".p-profile-index__fixed-content").css('display', 'none');
            $modal.fadeIn("slow");
        });
        // 3番目のprofile写真
        $(".profile-img-3").click(function (e) {
            e.stopImmediatePropagation();
            var $modal =  $("#modal-profile-bg-3");
            $(".p-profile-index__fixed-content").css('display', 'none');
            $modal.fadeIn("slow");
        });
        // 4番目のprofile写真
        $(".profile-img-4").click(function (e) {
            e.stopImmediatePropagation();
            var $modal =  $("#modal-profile-bg-4");
            $(".p-profile-index__fixed-content").css('display', 'none');
            $modal.fadeIn("slow");
        });

        // show confirm Vistar-card modal
        $(".btn").click(function (e) {
            e.stopImmediatePropagation();
            var $modal =  $("#modal-bg");
            $(".p-profile-index__fixed-content").css('display', 'none');
            $modal.fadeIn("slow");
        });

        // Vistarカードのダウンロードボタンを押すとダウンロード
        $("#btn-confim-submit").click(function () {
            $("#form-contact").submit();
        });
        // Vistarカードダウンロードのスマホのタッチ用
        $("#btn-confim-submit").bind('touchend',function () {
            $("#form-contact").submit();
        });

        //プロフィール上でフォロー解除時の処理
        $(".profile_un_follow").click(function (e) {
            e.stopImmediatePropagation();
            var $modal =  $("#modal-bg-prof");
            $modal.fadeIn("slow");
        });

        //close modal when click outside
        $("body").click(function(){
            $("#modal-bg").fadeOut("slow");
            $("#modal-bg-prof").fadeOut("slow");
            $("#modal-profile-bg-0").fadeOut("slow");
            $("#modal-profile-bg-1").fadeOut("slow");
            $("#modal-profile-bg-2").fadeOut("slow");
            $("#modal-profile-bg-3").fadeOut("slow");
            $("#modal-profile-bg-4").fadeOut("slow");
        });
        $("body").bind('touchend',function(){
            $("#modal-bg").fadeOut("slow");
            $("#modal-bg-prof").fadeOut("slow");
            $("#modal-profile-bg-0").fadeOut("slow");
            $("#modal-profile-bg-1").fadeOut("slow");
            $("#modal-profile-bg-2").fadeOut("slow");
            $("#modal-profile-bg-3").fadeOut("slow");
            $("#modal-profile-bg-4").fadeOut("slow");
        });
        $(".modal").click(function(e){
           e.stopPropagation();
        });
        $(".modal").bind('touchend',function(){
            e.stopPropagation();
        });
    });

    // LINE URL encode
    $(function() {
        var url = "{{ profile_url }}";
        encode_url = encodeURIComponent(url);
        $('.line_url').attr('href','https://social-plugins.line.me/lineit/share?url='+encode_url);
    });

    // ツイートボタン処理
    !function(d,s,id){
        var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
        if(!d.getElementById(id)){js=d.createElement(s);js.id=id;
        js.src=p+'://platform.twitter.com/widgets.js';
        fjs.parentNode.insertBefore(js,fjs);
        }}(document, 'script', 'twitter-wjs');

    // 活動エリアの各項目を区切る不要な「、」を削除
    $(function() {
        var str = $('#active_area_space').text();
        str = str.replace("、","");
        $('#active_area_space').text(str);
    });

    // プロフィール画像を左詰めで表示する処理
    $(function(){
        var image_element = $(".profile-img-count").length;
        var bg_html = '<div class="p-profile-index__mainvisual__img p-profile-index__mainvisual__img--lv2"><div class="card-bg"></div></div>';
        if (image_element==0){
            $(".p-profile-index__mainvisual").append(bg_html, bg_html, bg_html, bg_html, bg_html);
        }else if(image_element==1){
            $(".p-profile-index__mainvisual").append(bg_html, bg_html, bg_html, bg_html);
        }else if(image_element==2){
            $(".p-profile-index__mainvisual").append(bg_html, bg_html, bg_html);
        }else if(image_element==3){
            $(".p-profile-index__mainvisual").append(bg_html, bg_html);
        }else if(image_element==4){
            $(".p-profile-index__mainvisual").append(bg_html);
        }else{
            return
        }
    });
    </script>
    <style>
    /*プロフィール写真のcss*/
    @media screen and (min-width: 768px){
        .follow-release>.modal>.p-profile-index__mainvisual__img--lv1{
            width:310px;
            height: 530px;
            padding: 5px;
            bottom:140px;
        }
    }
    @media screen and (max-width: 768px){
        .follow-release>.modal>.p-profile-index__mainvisual__img--lv1{
            width:234px;
            height: 400px;
            top: -98px;
            left: 65px;
        }
    }
    /*プロフィール写真のcss*/

    /*Vistarカードモーダル表示領域のcss*/
    @media screen and (max-width: 768px) {
        #modal-content > img {
            width: 195px;
            height: 328px;
            margin: auto;
            margin-bottom: 100px;
            position: absolute;
            top: -40px;
            left: 85px;
        }

        .p-search__section__mainvisual__overlay {
            position: relative !important;
        }

        #custom-content {
            top: -98px;
            left: 53px;
            height:400px!important;
            width: 234px!important;
        }

        .p-search__section__mainvisual__overlay__eng {
            position: absolute !important;
            top: 235px;
            left: 65px;
            font-size: 1.2rem!important;
            line-height: 1px;
        }
        .p-search__section__mainvisual__overlay__box-lv1__name{
            font-size:2rem!important;
        }
        .p-search__section__mainvisual__overlay__box-lv1__age{
            font-size:12px;
            padding-left: 15px;
        }
        .p-search__section__mainvisual__overlay__box-lv2__img img{
            width: 19px!important;
        }
        .p-search__section__mainvisual__overlay__box-lv1 {
            position: absolute !important;
            top: 240px;
            font-size: 10px;
            left: 65px;
        }
        .p-search__section__mainvisual__overlay__box-lv2 {
            position: absolute !important;
            top: 275px;
            font-size: 20px;
            left: 65px;
        }

        .img_custom {
            position: absolute;
            width: 115px;
            top: -75px;
            left: 66px;
        }
        .qr_custom {
            position: absolute;
            width: 65px;
            right: 60px;
            top: -74px;
        }
        .c-review__foot__button {
            position: relative;
            right: -56px;
            top: 280px;
            height:30px;
            color: #fff!important;
            background-color: #21439a!important;
            padding-top: 5px!important;
            padding-bottom: 26px;
        }
    }
    @media screen and (min-width: 768px) {
        .p-search__section__mainvisual__overlay {
            position: relative!important;
        }
        .p-search__section__mainvisual__overlay__box-lv1 {
            position: absolute!important;
            top: 305px;
        }
        .p-search__section__mainvisual__overlay__box-lv2 {
            position: absolute!important;
            top: 340px;
        }
        .img_custom {
            position: absolute;
            width: 150px;
            top: -124px;
            left: 10px;
        }
        .qr_custom {
            position: absolute;
            width: 80px;
            top: -124px;
            right: 46px;
        }
        #custom-content{
            position: absolute;
            top: -140px!important;
            height: 530px!important;
            width: 310px!important;
        }
        .p-search__section__mainvisual__overlay__eng{
            position: absolute!important;
            top: 298px;
            font-size: 2rem!important;
            line-height: 1px;
        }
        .p-search__section__mainvisual__overlay__box-lv1__name{
            font-size:2.5rem!important;
        }
        .p-search__section__mainvisual__overlay__box-lv1__age{
            font-size:16px;
            padding-left: 32px;
        }
        .p-search__section__mainvisual__overlay__box-lv2__img{
            width:25px;
        }
        .p-search__section__mainvisual__overlay__box-lv2__detail span{
            font-size: 1.25rem;
        }
        .c-review__foot__button {
            position: relative;
            right: -125px;
            top: 250px;
            color: #fff!important;
            background-color: #21439a!important;
        }
    }
    /*Vistarカードモーダル表示領域のcss*/

    /*プロフィール写真のcss*/
    @media screen and (min-width: 768px){
        .follow-release>.modal>.p-profile-index__mainvisual__img--lv1{
            width:310px;
            height: 530px;
            padding: 5px;
            bottom:140px;
        }
    }
    @media screen and (max-width: 768px){
        .follow-release>.modal>.p-profile-index__mainvisual__img--lv1{
            width:234px;
            height: 400px;
            top: -98px;
            left: 65px;
        }
        .true_url{
            width:100%;
            margin:10px 0 0 0!important;
        }
    }
    .follow-release > #modal-content > .wrap > .prof-card > .prof-card__inner > .content > .head_content{
        position: absolute;
        top: 30px;
        left: 93px;
    }
    .follow-release > #modal-content > .wrap > .prof-card > .prof-card__inner > .content > .detail_content{
        position: absolute;
        top:89px;
        left: 93px;
    }
</style>
{% endblock %}
</div>
</div>