From 98a93c13effceefcd466d30d440a23dbb2a9abc2 Mon Sep 17 00:00:00 2001
From: chris2fr <chris@mann.fr>
Date: Thu, 15 Oct 2020 14:55:51 +0200
Subject: [PATCH 1/6] Show Meta on left

---
 index.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/index.html b/index.html
index bb4d09a..e11f4ad 100644
--- a/index.html
+++ b/index.html
@@ -48,6 +48,9 @@ <h1>
             <nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar">
                 <div class="w3-bar-block">
                     <a href="#/" class="w3-bar-item w3-button w3-padding w3-blue"><i class="fas fa-home"></i>&nbsp; Home</a>
+                    <preview-field label="V." v-bind:value="$root.sections.meta.version"></preview-field>
+                    <preview-field label="Canonical" v-bind:value="$root.sections.meta.canonical"></preview-field>
+                    <preview-field label="Date" v-bind:value="$root.sections.meta.lastModified"></preview-field>
                 </div>
                 <div class="w3-container w3-margin-top">
                     <h5>Sections</h5>
@@ -155,6 +158,7 @@ <h5 v-if="activePage.title != ''"><b><i class='page-title' style="margin-right:
 
 
         <template type="text/x-template" id="section-basics-template" lang="html">
+            <preview-field label="Full Name" v-bind:value="$root.sections.meta.canonical"></preview-field>
             <div id="section-basics-root">
                 <div class="w3-row">
                     <div class="w3-col m6">

From d767b40475a38ec672d6438fbb94abe113d8b296 Mon Sep 17 00:00:00 2001
From: chris2fr <chris@mann.fr>
Date: Thu, 15 Oct 2020 17:03:40 +0200
Subject: [PATCH 2/6] Set something on the top left to discriminate what I am
 looking at.

---
 .vscode/settings.json              |   3 +-
 app/app.js                         | 133 ++++++-----------------------
 components/preview_single_field.js |   9 --
 index.html                         |   8 +-
 4 files changed, 30 insertions(+), 123 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6f3a291..5eb6807 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,4 @@
 {
-    "liveServer.settings.port": 5501
+    // "liveServer.settings.port": 5501;
+    editor.disableMonospaceOptimizations: true;
 }
\ No newline at end of file
diff --git a/app/app.js b/app/app.js
index e1ad6bf..2059a49 100644
--- a/app/app.js
+++ b/app/app.js
@@ -32,75 +32,48 @@ var router = new VueRouter({
 });
 
 
-
 var app = new Vue({
 	el: '#app',
-
 	router: router,
-    
-
-
-
-
     components: 
     {
-
-	},
-
-
-
-
+		},
 
     data: 
     {
-		status: "laading",
-
-		sections: {},
-
-
-
-		/**
-		 * Details of the  current page/route.
-		 */
-		activePage: {
-			id: "",
-			title: "",
-			fontAwesomeIconCss: ""
-		},
-
-
-		countryCodes: []
+			status: "loading",
+
+			sections: {},
+			/**
+			 * Details of the  current page/route.
+			 */
+			activePage: {
+				id: "",
+				title: "",
+				fontAwesomeIconCss: ""
+			},
+
+			countryCodes: []
     },    
 
-
-
-
-
     created()
-    {
-		this.sections = models.newDefaultSections();
-
-		console.log("this.sections=", this.sections);
+		{
+			this.sections = models.newDefaultSections();
+			console.log("this.sections=", this.sections);
 
-        //-- Register all components
-        pageComponents.registerComponents();
+			//-- Register all components
+			pageComponents.registerComponents();
 
-        //-- Get the component for the initial route path
-        var initialRoute = this.$route.path;
-        var component = pageComponents.getComponentByPath(initialRoute);
-        this.setActivePageByComponent(component);
+			//-- Get the component for the initial route path
+			var initialRoute = this.$route.path;
+			var component = pageComponents.getComponentByPath(initialRoute);
+			this.setActivePageByComponent(component);
     },
-
-
-
 	
 
     destroyed() 
     {
-	},
-
-
-
+		},
 
 
     mounted() 
@@ -122,9 +95,6 @@ var app = new Vue({
 	},
 
 
-
-
-
 	methods: {
 		/**
 		 * Set details of the currently selected "page" (route) from a registered component.
@@ -136,7 +106,7 @@ var app = new Vue({
 			this.activePage.id = component.id;
 			this.activePage.title = component.title;
 			this.activePage.fontAwesomeIconCss = component.fontAwesomeIcon;
-        },
+    },
 		
 		
 
@@ -150,17 +120,12 @@ var app = new Vue({
 			this.activePage.fontAwesomeIconCss = "";
 		},
 
-
-
 		loadFromStorage: function()
 		{
 			var savedData = storage.getLocalStorage("sections");
-
 			this.populateSections(savedData);
 		},
 
-
-
 		populateSections: function(data)
 		{
 			if (data)
@@ -175,9 +140,6 @@ var app = new Vue({
 				}
 			}
 		},
-
-
-
 		loadCountryCodes: function()
 		{
 			console.log("loadCountryCodes(): data", countryCodes);
@@ -211,9 +173,6 @@ var app = new Vue({
 
 			return "";
 		},
-
-
-
 		displayLocation: function()
 		{
 			return this.sections.basics.location.city + ", " + this.getCountryName(this.sections.basics.location.countryCode);
@@ -242,9 +201,6 @@ var app = new Vue({
 				return 50;
 			}
 		},
-
-
-
 		languageFluencyAsPercent: function(index)
 		{
 			var fluency = this.$root.sections.skills[index].level;
@@ -266,9 +222,6 @@ var app = new Vue({
 				return 50;
 			}
 		},
-
-
-
 		workEndDate: function(index)
 		{
 			var endDate = this.$root.sections.work[index].endDate;
@@ -277,9 +230,6 @@ var app = new Vue({
 
 			return endDate;
 		},
-
-
-
 		projectEndDate: function(index)
 		{
 			var endDate = this.$root.sections.projects[index].endDate;
@@ -288,18 +238,12 @@ var app = new Vue({
 
 			return endDate;
 		},
-
-
-
 		dateMonthYear: function(dateString)
 		{
 			var dt = new Date(dateString);
 
 			return dt.getFullYear() + ", " + this.getMonthName(dt.getMonth() + 1);
 		},
-
-
-
 		getMonthName: function(monthNumber)
 		{
 			if (monthNumber == 1) return "January";
@@ -317,9 +261,6 @@ var app = new Vue({
 
 			return "";
 		},
-
-
-
 		/**
 		 * Clear save data and reset the sections structure.
 		 */
@@ -335,9 +276,6 @@ var app = new Vue({
 
 			return false;
 		},
-
-
-
 		saveResume: function()
 		{
 			var response = confirm("Resume saved");
@@ -347,9 +285,6 @@ var app = new Vue({
 			alert("Resume saved");
 			return false;
 		},
-
-
-
 		/**
 		 * Open the sidebar on smaller screens.
 		 */
@@ -372,9 +307,6 @@ var app = new Vue({
 			}
 		},
 
-
-
-
 		/**
 		 * Open the sidebar on smaller screens.
 		 */
@@ -386,9 +318,6 @@ var app = new Vue({
 			mySidebar.style.display = "none";
 			overlayBg.style.display = "none";
 		},
-
-
-
 		/**
 		 * Show the full-page loading overlay.
 		 */
@@ -406,9 +335,6 @@ var app = new Vue({
 		{
 			document.getElementById("full-page-overlay").style.display = "none";
 		},
-
-
-
 		/**
 		 * Find and mark the main navigation item for the selected "current" page/route
 		 */
@@ -460,9 +386,6 @@ var app = new Vue({
 				}
 			}
 		},
-
-
-
 		/**
 		 * Collapse or un-collapse a content element by setting its collapse state to opposite of current state.
 		 * @param {string} id ID of the content element to collapse/un-collapse.
@@ -479,9 +402,6 @@ var app = new Vue({
 			  x.className = x.className.replace(" w3-show", "");
 			}
 		},
-
-
-
 		/**
 		 * Move the position of an element in an array.
 		 * 
@@ -528,9 +448,6 @@ var app = new Vue({
 	},
 
 
-
-
-
 	watch: {
 		/**
 		 * Detect when a route changes.
diff --git a/components/preview_single_field.js b/components/preview_single_field.js
index cc84a67..3629134 100644
--- a/components/preview_single_field.js
+++ b/components/preview_single_field.js
@@ -1,7 +1,6 @@
 Vue.component("preview-field", {
 	template: '#preview-single-field-template',
 
-
 	props: [
 		'label',
 		'value',
@@ -10,22 +9,16 @@ Vue.component("preview-field", {
 		'format',
 	],
 
-	
-
 	mounted: function()
 	{
 		this.displayFormat = (this.format ? this.format : "");
 	},
 
-
-
 	destroyed: function()
 	{
 		
 	},
 
-
-	
 	data: function()
 	{
 		return {
@@ -34,8 +27,6 @@ Vue.component("preview-field", {
 		};
 	},
 
-	
-
 	methods: {
 		getLabel: function()
 		{
diff --git a/index.html b/index.html
index e11f4ad..bd6e692 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,6 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
         <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
@@ -48,9 +47,7 @@ <h1>
             <nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar">
                 <div class="w3-bar-block">
                     <a href="#/" class="w3-bar-item w3-button w3-padding w3-blue"><i class="fas fa-home"></i>&nbsp; Home</a>
-                    <preview-field label="V." v-bind:value="$root.sections.meta.version"></preview-field>
-                    <preview-field label="Canonical" v-bind:value="$root.sections.meta.canonical"></preview-field>
-                    <preview-field label="Date" v-bind:value="$root.sections.meta.lastModified"></preview-field>
+                    <a v-bind:href="this.sections.meta.canonical" target="_new" class="w3-bar-item w3-button w3-padding w3-blue">{{ this.sections.meta.version }} ({{ this.sections.meta.lastModified}})</a>
                 </div>
                 <div class="w3-container w3-margin-top">
                     <h5>Sections</h5>
@@ -158,7 +155,6 @@ <h5 v-if="activePage.title != ''"><b><i class='page-title' style="margin-right:
 
 
         <template type="text/x-template" id="section-basics-template" lang="html">
-            <preview-field label="Full Name" v-bind:value="$root.sections.meta.canonical"></preview-field>
             <div id="section-basics-root">
                 <div class="w3-row">
                     <div class="w3-col m6">
@@ -946,6 +942,7 @@ <h2>{{$root.sections.basics.name}}</h2>
                                     <div v-if="$root.sections.skills.length > 0" v-for="(skill, index) in $root.sections.skills">
                                         <p>{{skill.name}}</p>
                                         <div class="w3-light-grey w3-round-xlarge w3-small">
+                                            <div class="w3-container w3-center w3-round-xlarge w3-teal" v-bind:style="{ width: $root.skillLevelAsPercent(index) + '%' }">{{skill.level}}</div>
                                         </div>
                                     </div>
                                     <br>
@@ -953,6 +950,7 @@ <h2>{{$root.sections.basics.name}}</h2>
                                     <!-- Languages -->
                                     <div v-if="$root.sections.languages && $root.sections.languages.length > 0" >
                                         <p class="w3-large w3-text-theme"><b><i class="fa fa-globe fa-fw w3-margin-right w3-text-teal"></i>Languages</b></p>
+                                        <div v-if="$root.sections.languages.length > 0" v-for="(language, index) in $root.sections.languages">
                                         <div v-for="(language, index) in $root.sections.languages">
                                             <p>{{language.language}}</p>
                                             <div class="w3-light-grey w3-round-xlarge">

From 39c0ac11362bb3dc7dbd17569cbab6af42141282 Mon Sep 17 00:00:00 2001
From: chris2fr <chris@mann.fr>
Date: Thu, 15 Oct 2020 22:09:53 +0200
Subject: [PATCH 3/6] Modified the date of the export

---
 components/export.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/export.js b/components/export.js
index c8047ac..ba337fd 100644
--- a/components/export.js
+++ b/components/export.js
@@ -5,6 +5,8 @@ var exportComponent = {
 
 	mounted: function()
 	{
+		stringDate = new Date().toISOString();
+		this.$root.sections.meta.lastModified = stringDate.slice(0,16) + stringDate.slice(stringDate.lastIndexOf("Z")); //.replace(":","");
 		this.json = JSON.stringify(this.$root.sections, null, 4);
 	},
 

From a539cc4ba46539a920941312e0e0ce0081338d83 Mon Sep 17 00:00:00 2001
From: chris2fr <chris@mann.fr>
Date: Fri, 16 Oct 2020 13:43:10 +0200
Subject: [PATCH 4/6] Finished adding of Meta section

---
 app/app.js                   |  1 +
 app/page_registration.js     |  9 ++++++
 components/section_basics.js | 20 ------------
 components/section_meta.js   | 60 ++++++++++++++++++++++++++++++++++++
 index.html                   | 32 +++++++++++++++++--
 5 files changed, 100 insertions(+), 22 deletions(-)
 create mode 100644 components/section_meta.js

diff --git a/app/app.js b/app/app.js
index 2059a49..abea1aa 100644
--- a/app/app.js
+++ b/app/app.js
@@ -20,6 +20,7 @@ var router = new VueRouter({
 		{ path: '/section/skills', component: sectionSkillsComponent },
 		{ path: '/section/languages', component: sectionLanguagesComponent },
 		{ path: '/section/interests', component: sectionInterestsComponent },
+		{ path: '/section/meta', component: sectionMetaComponent },
 		{ path: '/section/references', component: sectionReferencesComponent },
 		{ path: '/section/projects', component: sectionProjectsComponent },
 
diff --git a/app/page_registration.js b/app/page_registration.js
index 13ff1bb..5bef120 100644
--- a/app/page_registration.js
+++ b/app/page_registration.js
@@ -162,6 +162,15 @@ var pageComponents = {
             fontAwesomeIcon: "fas fa-map"  
         });
 
+        this.registerComponent({
+            id: "meta",
+            path: "#/section/meta",
+            type: "page",
+            title: "Meta",
+            description: "",
+            fontAwesomeIcon: "fas fa-info"  
+        });
+
         this.registerComponent({
             id: "references",
             path: "#/section/references",
diff --git a/components/section_basics.js b/components/section_basics.js
index b68d0b6..41240c8 100644
--- a/components/section_basics.js
+++ b/components/section_basics.js
@@ -1,10 +1,6 @@
 var sectionBasicsComponent = {
 	template: '#section-basics-template',
 
-
-
-	
-
 	mounted: function()
 	{
 		var savedData = storage.getLocalStorage("section.basics");
@@ -25,19 +21,11 @@ var sectionBasicsComponent = {
 		}
 	},
 
-
-
-
-
 	destroyed: function()
 	{
 		
 	},
 
-
-	
-
-
 	data: function()
 	{
 		return {
@@ -45,10 +33,6 @@ var sectionBasicsComponent = {
 		};
 	},
 
-	
-
-
-
 	watch: {
 		/**
 		 * Watch all data for changes
@@ -66,10 +50,6 @@ var sectionBasicsComponent = {
 		}
 	},
 	
-
-
-
-
 	methods: {
 		addProfile: function()
 		{
diff --git a/components/section_meta.js b/components/section_meta.js
new file mode 100644
index 0000000..16777a5
--- /dev/null
+++ b/components/section_meta.js
@@ -0,0 +1,60 @@
+var sectionMetaComponent = {
+	template: '#section-meta-template',
+
+	mounted: function()
+	{
+		var savedData = storage.getLocalStorage("section.meta");
+
+		if (savedData)
+		{
+			// Data previously saved.
+			this.data = savedData;
+
+			for (var key in savedData) 
+			{
+				if (savedData.hasOwnProperty(key)) 
+				{
+					//console.log(key + " > " + savedData[key]);
+					this[key] = savedData[key];
+				}
+			}
+		}
+	},
+
+	destroyed: function()
+	{
+		
+	},
+
+	data: function()
+	{
+		return {
+
+		};
+	},
+
+	watch: {
+		/**
+		 * Watch all data for changes
+		 */
+		$data: {
+			handler: function(val, oldVal) 
+			{
+				// Save the data to localStorage
+				//NOTE: I'm initially not concerned about performance here/
+				//storage.setLocalStorage("section.basics", val);
+
+				//this.$root.sections.basics = val;
+			},
+			deep: true
+		}
+	},
+	
+	methods: {
+		addProfile: function()
+		{
+			var item = models.newDefaultMeta();
+			this.$root.sections.meta.profiles.push(item);
+		}
+	}
+};
\ No newline at end of file
diff --git a/index.html b/index.html
index bd6e692..d6abd1c 100644
--- a/index.html
+++ b/index.html
@@ -47,7 +47,8 @@ <h1>
             <nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar">
                 <div class="w3-bar-block">
                     <a href="#/" class="w3-bar-item w3-button w3-padding w3-blue"><i class="fas fa-home"></i>&nbsp; Home</a>
-                    <a v-bind:href="this.sections.meta.canonical" target="_new" class="w3-bar-item w3-button w3-padding w3-blue">{{ this.sections.meta.version }} ({{ this.sections.meta.lastModified}})</a>
+                    <a v-bind:href="this.sections.meta.canonical" v-if="this.sections.meta.canonical != ''" target="_new" class="w3-bar-item w3-button w3-padding w3-blue">{{ this.sections.meta.version }}</a>
+                    <span v-else  class="w3-bar-item w3-button w3-padding w3-blue">{{ this.sections.meta.version }}</span><span  v-if="this.sections.meta.lastModified != ''"  class="w3-bar-item w3-button w3-padding w3-blue">({{ this.sections.meta.lastModified}})</span>
                 </div>
                 <div class="w3-container w3-margin-top">
                     <h5>Sections</h5>
@@ -65,6 +66,7 @@ <h5>Sections</h5>
                     <a href="#/section/interests" class="w3-bar-item w3-button w3-padding"><i class="fas fa-map"></i>&nbsp; Interests</a>
                     <a href="#/section/references" class="w3-bar-item w3-button w3-padding"><i class="fas fa-list"></i>&nbsp; References</a>
                     <a href="#/section/projects" class="w3-bar-item w3-button w3-padding"><i class="fas fa-project-diagram"></i>&nbsp; Projects</a>
+                    <a href="#/section/meta" class="w3-bar-item w3-button w3-padding"><i class="fas fa-info-circle"></i>&nbsp; Meta</a>
                 </div>
                 <hr>
                 <div class="w3-bar-block">
@@ -287,7 +289,32 @@ <h5 class="margin-top-32">Social Network Profiles</h5>
             </div>
         </template>
 
-
+        <template type="text/x-template" id="section-meta-template" lang="html">
+            <div id="section-meta-root">
+                <div class="w3-row">
+                    <div class="w3-col m6">
+                        <form class="w3-container w3-card-4">
+                            <p>      
+                                <label for="version" class="w3-text-blue"><b>Version</b></label>
+                                <input id="version" class="w3-input w3-border" type="text" v-model="$root.sections.meta.version" required>
+                                <small id="versionHelp" class="form-help text-muted">Version of this CV.</small>
+                            </p>
+                            <p>      
+                                <label for="canonical" class="w3-text-blue"><b>URL</b></label>
+                                <input id="canonical" class="w3-input w3-border" type="text" v-model="$root.sections.meta.canonical" required>
+                                <small id="canonicalHelp" class="form-help text-muted">Canonical of this JSON file.</small>
+                            </p>
+                            <p>   
+                                <label for="lastModified" class="w3-text-blue"><b>Modified</b></label>
+                                <input id="lastModified" readonly class="w3-input w3-border" type="text" v-model="$root.sections.meta.lastModified" required>
+                                <small id="lastModifiedHelp" class="form-help text-muted">Read-only date and timme of export.</small>
+                              <!-- <preview-field label="Last Exported" v-bind:value="meta.lastModified"></preview-field>  -->
+                            </p>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </template>
 
         <template type="text/x-template" id="section-work-template" lang="html">
             <div id="section-work-root">
@@ -1334,6 +1361,7 @@ <h4 class="margin-top-32">Technologies used</h4>
         <script type="text/javascript" src="components/section_skills.js"></script>
         <script type="text/javascript" src="components/section_languages.js"></script>
         <script type="text/javascript" src="components/section_interests.js"></script>
+        <script type="text/javascript" src="components/section_meta.js"></script>
         <script type="text/javascript" src="components/section_references.js"></script>
         <script type="text/javascript" src="components/section_projects.js"></script>
         <script type="text/javascript" src="components/preview_resume.js"></script>

From 748ce035367d97630e1191f61f5800c60198ee13 Mon Sep 17 00:00:00 2001
From: chris2fr <chris@mann.fr>
Date: Fri, 16 Oct 2020 16:02:57 +0200
Subject: [PATCH 5/6] Cosmetic change

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index d6abd1c..c566449 100644
--- a/index.html
+++ b/index.html
@@ -66,7 +66,7 @@ <h5>Sections</h5>
                     <a href="#/section/interests" class="w3-bar-item w3-button w3-padding"><i class="fas fa-map"></i>&nbsp; Interests</a>
                     <a href="#/section/references" class="w3-bar-item w3-button w3-padding"><i class="fas fa-list"></i>&nbsp; References</a>
                     <a href="#/section/projects" class="w3-bar-item w3-button w3-padding"><i class="fas fa-project-diagram"></i>&nbsp; Projects</a>
-                    <a href="#/section/meta" class="w3-bar-item w3-button w3-padding"><i class="fas fa-info-circle"></i>&nbsp; Meta</a>
+                    <a href="#/section/meta" class="w3-bar-item w3-button w3-padding"><i class="fas fa-info"></i>&nbsp; Meta</a>
                 </div>
                 <hr>
                 <div class="w3-bar-block">

From a5d234f4ed883b6a4f182def5b07b223056f7c93 Mon Sep 17 00:00:00 2001
From: chris2fr <chris@mann.fr>
Date: Fri, 16 Oct 2020 16:17:46 +0200
Subject: [PATCH 6/6] OK for Delete and Reorder Profiles

---
 components/section_basics.js | 23 +++++++++++++++++++++++
 index.html                   |  3 ++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/components/section_basics.js b/components/section_basics.js
index 41240c8..1d0b15d 100644
--- a/components/section_basics.js
+++ b/components/section_basics.js
@@ -55,6 +55,29 @@ var sectionBasicsComponent = {
 		{
 			var item = models.newDefaultBasic();
 			this.$root.sections.basics.profiles.push(item);
+		},
+
+		deleteClicked: function(index)
+		{
+			var response = confirm("Are you sure you want to delete this interest?");
+
+			if (response == true)
+			{
+				this.$root.sections.basics.profiles.splice(index, 1);
+			}
+		},
+
+
+		moveUpClicked: function(index)
+		{
+			this.$root.moveArrayPosition(this.$root.sections.basics.profiles, index, index - 1);
+		},
+
+
+		moveDownClicked: function(index)
+		{
+			this.$root.moveArrayPosition(this.$root.sections.basics.profiles, index, index + 1);
 		}
+	
 	}
 };
\ No newline at end of file
diff --git a/index.html b/index.html
index c566449..f32b49a 100644
--- a/index.html
+++ b/index.html
@@ -237,7 +237,8 @@ <h5 class="margin-top-32">Social Network Profiles</h5>
                         Any social networks that you participate in.
                         <button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addProfile">+ Add Profile</button>
                         
-                        <form class="w3-container w3-card-4 w3-margin-top" v-for="profile in $root.sections.basics.profiles">
+                        <form class="w3-container w3-card-4 w3-margin-top" v-for="(profile, pr_index) in $root.sections.basics.profiles">
+                            <card-header v-bind:label="profile.network" v-bind:id="pr_index" v-on:delete-clicked="deleteClicked" v-on:move-up-clicked="moveUpClicked" v-on:move-down-clicked="moveDownClicked"></card-header>
                             <p>      
                                 <label for="profiles.network" class="w3-text-blue"><b>Network</b></label>
                                 <input id="profiles.network" class="w3-input w3-border" type="text" v-model="profile.network">