thedrummeraki/tanoshimu

<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li><%= link_to('Home', admin_path) %></li>
    <li><%= link_to('Shows', admin_shows_path) %></li>
    <li class="is-active"><a href="../"><%= @show.title %></a></li>
  </ul>
</nav>

<div style="display: flex; justify-content: space-between;">
  <h1 class="title"><%= @show.title %></h1>
  <div>
    <% if @show.synchable? %>
      <%= link_to('Sync show now', admin_show_sync_now_path(@show.id), class: 'button is-success is-light', data: {method: :post}) %>
      <%= link_to('Sync all episodes', admin_show_sync_episodes_path(@show.id), class: 'button is-warning is-light', data: {method: :post}) %>
    <% end %>
    <% if @show.published? %>
      <%= link_to('Unpublish', admin_show_unpublish_path(@show.id), class: 'button is-danger', data: {method: :post}) %>
    <% else %>
      <%= link_to('Publish', admin_show_publish_path(@show.id), class: 'button is-success is-light', data: {method: :post}) %>
    <% end %>
  </div>
</div>
<div class="columns">
  <div class="column is-4">
    <div class="hf-section">
      <h2 class="subtitle">Thumbnail preview</h2>
      <%= render ShowThumbnailComponent.new(show: @show) %>
    </div>
    <div class="hf-section">
    
      <h2 class="subtitle">General info</h2>
      <div class="tile box">
        <div class="content">
          <p>Site ID: <code><%= @show.slug %></code></p>
          <p>Internal ID: <code><%= @show.id %></code></p>
          <p>Published Status: <%= boolean_tag(@show.published?, true_text: 'Published', false_text: 'Unpublished', light: true) %></p>
          <p>Status: <%= value_tag(@show.status) %></p>
          <p>Starts on: <%= @show.starts_on&.strftime('%b %d, %Y') || '-' %></p>
          <p>Ended on: <%= @show.ended_on&.strftime('%b %d, %Y') || '-' %></p>
          <p>Created: <%= @show.created_at.strftime('%b %d, %Y @ %H:%M:%S') %></p>

          <% if @show.synched? %>
            <hr>
            <p>Sync ref ID <code><%= @show.reference_id %></code>
            <p>Last sync: <%= @show.synched_at.strftime('%b %d, %Y @ %H:%M:%S') %></p>
            <p>Sync source: <code><%= @show.reference_source.presence || 'N/A' %></code></p>
            <p>Sync request by <b><%= @show.synched_by_user&.name %></b></p>
            <% if @show.reference_id && @show.reference_source %>
              <p><%= link_to("Link to #{@show.reference_source}", "https://kitsu.io/anime/#{@show.reference_id}", target: :_blank) %></p>
              <p><%= link_to("API link to #{@show.reference_source}", "https://kitsu.io/api/edge/anime/#{@show.reference_id}", target: :_blank) %></p>
            <% end %>
          <% end %>

          <hr>
          <p>Seasons count: <code><%= @show.seasons.count %></code></p>
          <p>Episodes count: <code><%= @show.episodes.count %></code></p>

          <hr>
          <p>Likes/dislikes: <%= value_tag("#{@show.likes.count} like(s)", colour: :success) %><%= value_tag("#{@show.dislikes.count} dislike(s)", colour: :danger) %>
          <p>Popularity (lower is better): <code><%= @show.popularity %></code></p>
          <p>Avg. Rating: <code><%= @show.rating %></code></p>
          <p>Ratings count: <code><%= @show.ratings.count %></code></p>
          <p>Queues count: <code><%= @show.queues.count %></code></p>
          <p>Tags: <%= @show.tags.map(&:value).join(', ').presence || 'N/A' %></p>
        </div>
      </div>
    </div>
  </div>
  <div class="column is-8">
    <div class="hf-section">
      <% unless @show.synchable? %>
        <div class="notification is-warning is-light">
          <small>
            This show may be "out of sync" and we can't sync episodes with Kitsu. Please go to <%= link_to('Shows', admin_shows_path) %>
            and sync all shows using the "Sync airing shows". This may take some time to complete.
          </small>
        </div>
      <% end %>

      <h2 class="subtitle">Edit show information</h2>
      <div class="tile is-child box">
        <%= form_with(model: [:admin, @show]) do |f| %>
          <div class="columns">
            <div class="column field">
              <%= f.label :title, 'English title', class: 'label' %>
              <%= text_field_tag('title[en]', @show.titles[:en], class: 'input is-fullwidth') %>
            </div>
            <div class="column field">
              <%= f.label :title, 'Japanese title', class: 'label' %>
              <%= text_field_tag('title[jp]', @show.titles[:jp], class: 'input is-fullwidth') %>
            </div>
          </div>
          <div class="columns">
            <div class="column field">
              <%= f.label :description, 'English description', class: 'label' %>
              <%= text_area_tag('description[en]', @show.description_record&.en, class: 'textarea is-fullwidth', rows: 4) %>
            </div>
            <div class="column field">
              <%= f.label :description, 'Japanese description', class: 'label' %>
              <%= text_area_tag('description[jp]', @show.description_record&.jp, class: 'textarea is-fullwidth', rows: 4, placeholder: 'Notice: English description is used by default.') %>
            </div>
          </div>
        <% end %>
      </div>
    </div>

    <div class="hf-section">
      <h2 class="subtitle">Show cover</h2>
      <div class="card">
        <div class="holder">
          <div class="overlay">
            <%= @show.banner.attached? ? image_tag(@show.banner) : image_tag(@show.banner_url) %>
          </div>
        </div>
      </div>
    </div>

    <h2 class="subtitle">Where can users get more info?</h2>
    <% if @show.urls.any? %>
      <ul style="margin-bottom: 1rem;">
        <% @show.urls.each do |show_url| %>
          <li>- <%= link_to("Link to #{t("anime.platforms.#{show_url.platform}")}", show_url.value) %></li>
        <% end %>
      </ul>
    <% else %>
      <p>- No links exist as of yet -</p>
    <% end %>

    <h2 class="subtitle">Seasons and episodes</h2>
    <div class="row no-margin">
      <div class="container-fluid">
        <% @show.seasons.each do |season| %>
          <div class="is-hidden" season="<%= season.number %>">
            <nav class="level">
              <div class="level-item has-text-centered">
                <div>
                  <p class="heading">Episodes</p>
                  <p class="title"><%= season.episodes.count %></p>
                </div>
              </div>
            </nav>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>

<div class="modal" id="new-season-modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
      <button class="delete" aria-label="close" action="close"></button>
    </header>
    <section class="modal-card-body">
      <!-- Content ... -->
    </section>
    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button" action="close">Cancel</button>
    </footer>
  </div>
</div>

<script type="text/javascript">
  const newSeasonButton = document.querySelector('[data-season="new"]');
  const newSeasonModal = document.querySelector('#new-season-modal');

  newSeasonButton.onclick = (e) => {
    e.preventDefault();

    newSeasonModal.classList.add('is-active');
  };

  const closeButtons = document.querySelectorAll('[action="close"]');
  for (var i = 0; i < closeButtons.length; i++) {
    const element = closeButtons[i];
    element.onclick = (e) => {
      e.preventDefault();
      newSeasonModal.classList.remove('is-active');
    };
  }

  $(document).ready(() => {
    $('div[season="1"]').removeClass('is-hidden');
    $('a[data-season]').on('click', (e) => {
      e.preventDefault();
      const $target = $(e.target);
      const season = $target.attr('data-season');

      $('div[season]').addClass('is-hidden');
      $('li').removeClass('is-active');

      $target.parent().addClass('is-active');
      $('div[season="' + season + '"]').removeClass('is-hidden');
    });
  });
</script>