populate import/export settings pane

1 files changed, 123 insertions, 1 deletions

diff --git a/src/views/panes/settings/import.ecr b/src/views/panes/settings/import.ecr
index fe8e94f..5201e77 100644
--- a/src/views/panes/settings/import.ecr
+++ b/src/views/panes/settings/import.ecr
@@ -5,12 +5,134 @@
 >
   <div class='panel panel-default'>
     <div class='panel-heading'>
+      <b>
+        <i class='fa fa-upload'></i>
+        Import Blog Posts
+      </b>
     </div><!-- panel-heading -->
 
     <div class='panel-body'>
       <p>
-        TODO: import
+        This panel allows you to import blog posts.
       </p>
+
+      <p>
+        Use the file input field below to select an input
+        <a
+          href='https://codex.wordpress.org/Tools_Export_Screen'
+          title='View WordPress export instructions.'
+          rel='nofollow noopener'
+          target='_blank'
+        >WXR</a>
+        file, select a destination site, then press the "Import Blog
+        Posts" button to import your blog posts.
+      </p>
+
+      <div class='form-group'>
+        <label for='import-file'>
+          Input File
+        </label>
+
+        <input
+          id='import-file'
+          type='file'
+          class='form-control'
+          title='Choose input file.'
+          aria-describedby='import-file-help'
+        />
+
+        <p id='import-file-help' class='help-block'>
+          Source file (in WXR format) containing blog posts.
+        </p>
+      </div><!-- form-group -->
+
+      <div class='form-group'>
+        <label for='import-file'>
+          Destination Site
+        </label>
+
+        <select
+          id='import-site'
+          class='form-control'
+          title='Choose destination site.'
+          aria-describedby='import-site-help'
+        ><%=
+          site_options
+        %></select>
+
+        <p id='import-site-help' class='help-block'>
+          Destination site for imported blog posts.
+        </p>
+      </div><!-- form-group -->
+
+      <div class='form-group'>
+        <a
+          href='#'
+          id='import-posts'
+          class='btn btn-primary'
+          title='Import blog posts from WXR file.'
+        >
+          <i class='fa fa-upload'></i>
+          Import Blog Posts
+        </a>
+      </div><!-- form-group -->
+    </div><!-- panel-body -->
+  </div><!-- panel -->
+
+  <div class='panel panel-default'>
+    <div class='panel-heading'>
+      <b>
+        <i class='fa fa-download'></i>
+        Export Blog Posts
+      </b>
+    </div><!-- panel-heading -->
+
+    <div class='panel-body'>
+      <p>
+        This panel allows you to export blog posts.
+      </p>
+
+      <p>
+        Choose a source site, then click the "Export Blog Posts" button
+        below to export blog posts in
+        <a
+          href='https://codex.wordpress.org/Tools_Export_Screen'
+          title='View WordPress export instructions.'
+          rel='nofollow noopener'
+          target='_blank'
+        >WXR</a> format.
+      </p>
+
+      <div class='form-group'>
+        <label for='export-site'>
+          Source Site
+        </label>
+
+        <select
+          id='export-site'
+          class='form-control'
+          title='Choose source site.'
+          aria-describedby='export-site-help'
+        ><%=
+          site_options
+        %></select>
+
+        <p id='export-site-help' class='help-block'>
+          Source site of blog posts to export.
+        </p>
+      </div><!-- form-group -->
+
+      <div class='form-group'>
+        <a
+          href='#'
+          id='export-posts'
+          class='btn btn-primary'
+          title='Export blog posts to file in WXR format.'
+        >
+          <i class='fa fa-download'></i>
+          Export Blog Posts
+        </a>
+      </div><!-- form-group -->
     </div><!-- panel-body -->
   </div><!-- panel -->
 </div><!-- tab-pane -->