<style>
  .dz-default {
    display: none;
  }
  .dz-preview {
    display: none;
  }
  .dz-processing {
    display: none;
  }
  .dz-error {
    display: none;
  }
  .dz-image-preview {
    display: none;
  }
</style>

<div class="header-Outro with-site-image">
  <div class="row content wide">

    <div class="col col-50 signup-Area" style="width: 293px;">
      <div class="signup-Form">
  	  <fieldset class="content">
        <a href="/surf/<%= current_site.username %>" class="screenshot dashboard" style="background-image:url(<%= current_site.screenshot_url('index.html', '540x405') %>);"></a>
	    </fieldset>
      </div>
    </div>

	<div class="col col-50">
    <h2 class="eps"><%= current_site.title %></h2>
    <p class="site-url" style="margin-top: -9px;"><a href="//<%= current_site.host %>" target="_blank"><%= current_site.host %></a></p>
	<ul>
<% if current_site.updated_at %>
	<li>Last updated <%= current_site.updated_at.ago.downcase %></li>
<% end %>
	<li>Using <strong><%= current_site.space_percentage_used %>% (<%= current_site.total_used_space.to_space_pretty %>) of your <%= current_site.maximum_space.to_space_pretty %></strong>.
  <br>
  <% if !current_site.supporter? %>Need more space? <a href="/plan">Become a Supporter!</a><% end %></li>
	<li><strong><%= current_site.hits.to_s.reverse.gsub(/...(?=.)/,'\&,').reverse %></strong> hits</li>
	</ul>
	</div>

  </div> <!-- end .row -->
</div> <!-- end .header-Outro -->

<main class="content-Base">

<div class="content wide">

<% unless current_site.changed_count > 5 %>
<div class="welcome">
  <!-- <div class="close-button"></div> -->
  <h4>Hello! Welcome to your new site.</h4>
  To get started, click on the <strong>index.html</strong> file below to edit your home page. Make some changes and weʼll add your website to our <a href="/browse">website gallery</a>! You can add more files (such as images) by dragging them from your computer into the box below. Need help building web sites? Check out these <a href="/tutorials">tutorials</a>!
</div>
<% end %>

  <% if @error %>
    <div class="alert alert-block alert-error">
      <p><%= @error %></p>
    </div>
  <% end %>

  <% if flash.keys.length > 0 %>
    <div class="alert alert-block">
      <p>
        <% flash.keys.each do |key| %>
          <%== flash[key] %>
        <% end %>
      </p>
    </div>
  <% end %>

<div class="files">
  <div id="uploadingOverlay" class="uploading-overlay" style="display: none">
    <div class="uploading">
        <p>Uploading, please wait...</p>
      <div id="progressBar" class="progress-bar" style="display: none"><div id="uploadingProgress" class="progress" style="width: 0%"></div></div>
    </div>
  </div>
  <div class="header">
    <div class="breadcrumbs">
      <% if params[:dir].nil? || params[:dir].empty? || params[:dir] == '/' %>
        Home
      <% else %>
        <% puts params[:dir].inspect %>
        <a href="/dashboard">Home</a>
      <% end %>

      <% if @dir %>
        <% dir_array = @dir.split '/' %>
        <% dir_array.each_with_index do |dir,i| %>
          <% if i+1 < dir_array.length %>
            <a href="/dashboard?dir=<%= Rack::Utils.escape dir %>"><%= dir %></a> / 
          <% else %>
            <%= dir %>
          <% end %>
        <% end %>
      <% end %>
    </div>
    <div class="actions">
      <a href="/site_files/new_page" class="btn-Action"><i class="fa fa-file"></i>  New Page</a>
      <a href="#createDir" class="btn-Action" data-toggle="modal"><i class="fa fa-folder"></i> New Folder</a>
      <a href="#" class="btn-Action" onclick="clickUploadFiles(); return false"><i class="fa fa-upload"></i> Upload</a>
    </div>
  </div>
  <div class="list">
    <form action="/site_files/upload" class="dropzone" id="uploads">
      <div class="dz-message" style="display: none"></div>
      <input name="csrf_token" type="hidden" value="<%= csrf_token %>">
      <div class="upload-Boundary <%= @file_list.length <= 5 ? 'with-instruction' : '' %>">
        <% @file_list.each do |file| %>
          <div class="file filehover">
            <% if file[:is_html] && current_site.screenshot_exists?(file[:path], '210x158') %>
              <div class="html-thumbnail html fileimagehover">
                <img src="<%= current_site.screenshot_url(file[:path], '210x158') %>">
                <div class="overlay"></div>
              </div>
            <% elsif file[:is_image] && current_site.thumbnail_exists?(file[:path], '210x158') %>
              <div class="html-thumbnail image fileimagehover">
                <img src="<%= current_site.thumbnail_url(file[:path], '210x158') %>">
                <div class="overlay"></div>
              </div>
            <% elsif file[:is_directory] %>
              <div class="html-thumbnail folder fileimagehover">
                <div class="folder-icon"></div>
                <div class="overlay"></div>
              </div> 
            <% else %>
              <div class="html-thumbnail misc fileimagehover">
                <div class="misc-icon"><%= file[:ext] %></div>
                <div class="overlay"></div>
              </div>
            <% end %>

            <a class="title">
              <% if file[:name].length > 19 %>
                <%= file[:name].slice(0..18) %>&hellip;
              <% else %>
                <%= file[:name] %>
              <% end %>
            </a>
            <div class="overlay">
              <% if file[:is_editable] %>
                <a href="/site_files/text_editor<%= file[:path] %>"><i class="fa fa-edit" title="Edit"> Edit</i></a>
              <% end %>
              <% if file[:is_directory] %>
                <a href="?dir=<%= Rack::Utils.escape file[:path] %>"><i class="fa fa-edit" title="Manage"> Manage</i></a>
              <% end %>
              <% if !file[:is_root_index] %>
                <a href="#" onclick="confirmFileDelete('<%= file[:path] %>')"><i class="fa fa-trash" title="Delete"> Delete</i></a>
              <% end %>
              <a class="link-overlay" href="http://<%= current_site.username %>.neocities.org<%= file[:path] %>" title="View <%= file[:path] %>" target="_blank"></a>
            </div>
          </div>
        <% end %>
      </div>
    </form>
  </div>
</div>
      <form method="POST" action="/site_files/delete" id="deleteFilenameForm">
        <input name="csrf_token" type="hidden" value="<%= csrf_token %>">
        <input type="hidden" id="deleteFilenameInput" name="filename">
      </form>

      <div class="modal hide fade" id="deleteConfirmModal" tabindex="-1" role="dialog" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
        <div class="modal-header">
          <button class="close" type="button" data-dismiss="modal" aria-hidden="true">x</button>
          <h3 id="deleteConfirmModalLabel">Confirm deletion</h3>
        </div>
        <div class="modal-body">
          <p>You are about to delete "<span id="deleteFileName"></span>". Are you sure?</p>
        </div>
        <div class="modal-footer">
          <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
          <button class="btn btn-danger" onclick="fileDelete()">Delete</button>
        </div>
      </div>

<div class="site-actions" style="margin-bottom:25px">
  <a href="/site_files/allowed_types">Allowed file types</a> |
  <a href="/site_files/<%= current_site.username %>.zip">Download entire site</a> |
  <a href="/site_files/mount_info">Mount your site as a drive on your computer!</a>
</div>

</div>
</main>

<form id="uploadFilesButtonForm" method="POST" action="/site_files/upload" enctype="multipart/form-data" style="display: none" onsubmit="showUploadProgress()">
  <input name="csrf_token" type="hidden" value="<%= csrf_token %>">
  <input name="from_button" type="hidden" value="true">
  <input name="dir" type="hidden" value="<%= @dir %>">
  <input id="uploadFiles" type="file" name="files[]" multiple onchange="$('#uploadFilesButtonForm').submit()">
</form>

<script src="/js/dropzone.min.js"></script>
<script type="text/javascript">

  function confirmFileDelete(name) {
    $('#deleteFileName').html(name);
    $('#deleteConfirmModal').modal();
  }

  function fileDelete() {
    $('#deleteFilenameInput').val($('#deleteFileName').html());
    $('#deleteFilenameForm').submit();
  }

  function clickUploadFiles() {
    $("input[id='uploadFiles']").click()
  }

  function showUploadProgress() {
    $('#uploadingOverlay').css('display', 'block')
  }

  function hideUploadProgress() {
    $('#progressBar').css('display', 'none')
    $('#uploadingOverlay').css('display', 'none')
  }

  Dropzone.options.uploads = {
    paramName: 'files',
    maxFilesize: <%= current_site.remaining_space.to_mb %>,
    clickable: false,
    addRemoveLinks: false,
    dictDefaultMessage: '',
    uploadMultiple: true,
    init: function() {
      this.on("successmultiple", function(file) {
        location.reload()
      })

      this.on("error", function(file, errorMessage) {
        hideUploadProgress()
        alert('Failed: '+errorMessage)
      })

      this.on("totaluploadprogress", function(progress, totalBytes, totalBytesSent) {
        showUploadProgress()
        $('#progressBar').css('display', 'block')
        $('#uploadingProgress').css('width', progress+'%')
      })
    }
  }
</script>

<div class="modal hide fade" id="createDir" tabindex="-1" role="dialog" aria-labelledby="createDirLabel" aria-hidden="true">
  <form method="POST" action="/site/create_directory">
    <input type="hidden" value="<%= csrf_token %>" name="csrf_token">
    <input type="hidden" value="<%= @dir %>" name="dir">
    <div class="modal-header">
      <button class="close" type="button" data-dismiss="modal" aria-hidden="true">x</button>
      <h3 id="createDirLabel">Create Folder</h3>
    </div>
    <div class="modal-body">
      <p>
        Folder name:
      </p>
      <input name="name" type="text" placeholder="images">
    </div>
    <div class="modal-footer">
      <button type="submit" class="btn btn-Action">Create</button>
      <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
    </div>
  </form>
</div>