Mango/src/views/title.ecr

<div>
	<h2 class=uk-title><span><%= title.display_name %></span>
		&nbsp;
		<% if is_admin %>
			<a onclick="edit()" class="uk-icon-button" uk-icon="icon:pencil"></a>
		<% end %>
	</h2>
</div>
<ul class="uk-breadcrumb">
	<li><a href="<%= base_url %>">Library</a></li>
	<%- title.parents.each do |t| -%>
	<li><a href="<%= base_url %>book/<%= t.id %>"><%= t.display_name %></a></li>
	<%- end -%>
	<li class="uk-disabled"><a><%= title.display_name %></a></li>
</ul>
<p class="uk-text-meta"><%= title.size %> entries found</p>
<div class="uk-grid-small" uk-grid>
	<div class="uk-margin-bottom uk-width-3-4@s">
		<form class="uk-search uk-search-default">
			<span uk-search-icon></span>
			<input class="uk-search-input" type="search" placeholder="Search">
		</form>
	</div>
	<div class="uk-margin-bottom uk-width-1-4@s">
		<div class="uk-form-horizontal">
			<select class="uk-select" id="sort-select">
				<option id="auto-up">▲ Auto</option>
				<option id="auto-down">▼ Auto</option>
				<option id="name-up">▲ Name</option>
				<option id="name-down">▼ Name</option>
				<option id="date-up">▲ Date Modified</option>
				<option id="date-down">▼ Date Modified</option>
				<option id="progress-up">▲ Progress</option>
				<option id="progress-down">▼ Progress</option>
			</select>
		</div>
	</div>
</div>
<div id="item-container" class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
	<%- title.titles.each_with_index do |t, i| -%>
	<div class="item" data-mtime="<%= t.mtime.to_unix %>" data-progress="0.0">
		<a class="acard" href="<%= base_url %>book/<%= t.id %>">
        <div class="uk-card uk-card-default">
            <div class="uk-card-media-top">
              <img data-src="<%= t.cover_url %>" data-width data-height alt="" uk-img>
            </div>
            <div class="uk-card-body">
			<h3 class="uk-card-title break-word" data-title="<%= t.display_name.gsub("\"", "&quot;") %>"><%= t.display_name %></h3>
              <p><%= t.size %> entries</p>
            </div>
        </div>
      </a>
	</div>
	<%- end -%>
  <%- title.entries.each_with_index do |e, i| -%>
  <div class="item" data-mtime="<%= e.mtime.to_unix %>" data-progress="<%= percentage[i] %>" id="<%= e.id %>">
      <a class="acard">
		  <div class="uk-card uk-card-default" onclick="showModal(&quot;<%= e.encoded_path %>&quot;, '<%= e.pages %>', <%= (percentage[i] * 100).round(1) %>, &quot;<%= title.encoded_display_name %>&quot;, &quot;<%= e.encoded_display_name %>&quot;, '<%= e.title_id %>', '<%= e.id %>')">
          <div class="uk-card-media-top">
            <img data-src="<%= e.cover_url %>" alt="" data-width data-height uk-img>
          </div>
          <div class="uk-card-body">
            <div class="uk-card-badge uk-label"><%= (percentage[i] * 100).round(1) %>%</div>
			<h3 class="uk-card-title break-word" data-title="<%= e.display_name.gsub("\"", "&quot;") %>"><%= e.display_name %></h3>
              <p><%= e.pages %> pages</p>
          </div>
      </div>
      </a>
    </div>
  <%- end -%>
</div>

<div id="modal" class="uk-flex-top" uk-modal>
  <div class="uk-modal-dialog uk-margin-auto-vertical">
    <button class="uk-modal-close-default" type="button" uk-close></button>
    <div class="uk-modal-header">
	<div>
		<h3 class="uk-modal-title break-word" id="modal-title"><span></span>
			&nbsp;
			<% if is_admin %>
				<a class="uk-icon-button" uk-icon="icon:pencil"></a>
			<% end %>
		</h3>
	</div>
      <p class="uk-text-meta uk-margin-remove-bottom break-word" id="path-text"></p>
      <p class="uk-text-meta uk-margin-remove-top" id="pages-text"></p>
    </div>
    <div class="uk-modal-body">
      <p>Read</p>
      <p uk-margin>
        <a id="beginning-btn" class="uk-button uk-button-default">From beginning</a>
        <a id="continue-btn" class="uk-button uk-button-primary"></a>
      </p>
      <p>Progress</p>
      <p uk-margin>
        <button id="read-btn" class="uk-button uk-button-default">Mark as read (100%)</button>
        <button id="unread-btn" class="uk-button uk-button-default">Mark as unread (0%)</button>
      </p>
    </div>
  </div>
</div>

<div id="edit-modal" class="uk-flex-top" uk-modal>
  <div class="uk-modal-dialog uk-margin-auto-vertical">
    <button class="uk-modal-close-default" type="button" uk-close></button>
    <div class="uk-modal-header">
	<div>
		<h3 class="uk-modal-title break-word" id="modal-title">Edit</h3>
	</div>
    </div>
    <div class="uk-modal-body">
		<div class="uk-margin">
			<label class="uk-form-label" for="display-name">Display Name</label>
			<div class="uk-inline">
				<a class="uk-form-icon uk-form-icon-flip" uk-icon="icon:check"></a>
				<input class="uk-input" type="text" name="display-name" id="display-name-field">
			</div>
		</div>
		<div class="uk-margin">
			<label class="uk-form-label">Cover Image</label>
			<div class="uk-grid">
				<div class="uk-width-1-2@s">
					<img id="cover" data-title-cover="<%= title.cover_url %>" alt="" data-width data-height uk-img>
				</div>
				<div class="uk-width-1-2@s">
					<div id="cover-upload" class="upload-field uk-placeholder uk-text-center uk-flex uk-flex-middle" data-title-id="<%= title.id %>">
						<div>
							<span uk-icon="icon: cloud-upload"></span>
							<span class="uk-text-middle">Upload a cover image by dropping it here or</span>
							<div uk-form-custom>
								<input type="file" accept="image/jpeg, image/png">
								<span class="uk-link">selecting one</span>
							</div>
						</div>
					</div>

				</div>
			</div>
			<progress id="upload-progress" class="uk-progress" value="0" max="100" hidden></progress>
		</div>
		<div id="title-progress-control" hidden>
			<label class="uk-form-label">Progress</label>
			<p class="uk-margin-remove-vertical">
			<button id="read-btn" class="uk-button uk-button-default" onclick="updateProgress('<%= title.id %>', null, 1)">Mark all as read (100%)</button>
			<button id="unread-btn" class="uk-button uk-button-default" onclick="updateProgress('<%= title.id %>', null, 0)">Mark all as unread (0%)</button>
			</p>
		</div>
    </div>
  </div>
</div>

<% content_for "script" do %>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/4.0.11/dotdotdot.js"></script>
<script src="<%= base_url %>js/dots.js"></script>
<script src="<%= base_url %>js/alert.js"></script>
<script src="<%= base_url %>js/title.js"></script>
<script src="<%= base_url %>js/search.js"></script>
<script src="<%= base_url %>js/sort-items.js"></script>
<% end %>