<template>
  <card class="card-user" style="max-height:100%"
		v-show="menou"
	>
      <div class="author">
        <img class="avatar border-white" src="@/assets/img/docker.png" alt="...">
      </div>

      <b-container fluid class="bv-example-row">
          <div class="row text-center">
            <div class="col-12">
              <b>View and <span class="text-info">Manage your build</span></b>
            </div>
          </div>

<br>

 <div class="row"
   v-if="menouselect"
 >
    <div class="col-sm-12 sm-12">
    	<b-form-select v-model="selected" :options="options" size="sm" class="mt-3"
			    @change="setservice">
      ></b-form-select>
    </div>
  </div>

 <div class="row">
    <div class="col-sm-12 sm-12">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" name="validationTooltipUsernamePrepend1">Base Service Name</span>
        </div>
        <input 	
					type="text" 
					class="form-control text-success" 
				  v-model="form_baseservice"
				  disabled
					aria-describedby="validationTooltipUsernamePrepend1" 
				>
        <div class="input-group-prepend">
          <button
            class=" btn btn-outline-info btn-sm"
              title="Info"
            round
            @click="onAction('form_baseservice')">
 							Build reference
          </button>
        </div>
      </div>
    </div>
  </div>

   <ValidationProvider
			ref="hybrid_stackname"
			name="myServicename"
			rules="required|alpha_num_name"
			v-slot="{ errors, ariaMsg, ariaInput,   valid, invalid }"
		>
 <div class="row">
			<div class="col-sm-12 sm-12">
       <div class="input-group input-group-sm sm-3">
        <div class="input-group-prepend">
          <span class="input-group-text" >Service &nbsp; Name</span>
        </div>
				<input 
					type="text" 
					class="form-control" 
					v-bind:class="{'is-valid': isDeployValid.stackname == 1, 'is-invalid': isDeployValid.stackname == 2}"
          aria-label="Small" aria-describedby="inputGroup-sizing-sm"
					v-model="form_myservicename"
					v-on:keyup="isValid('stackname')"
					v-on:blur="isValid('stackname')"
					v-on:input="isValid('stackname')"
					v-on:change="isValid('stackname')"
					v-on:focus="isValid('stackname')"

          data-vv-as='"nyServicename"'
          data-vv-value-path="form_myservicename"
          data-vv-name="form_myservicename"

				>
        <div class="input-group-prepend">
          <button
            class="ti-info btn btn-outline-secondary btn-sm"
              title="Info"
            round
            @click="onAction('form_myservicename')">
          </button>
        </div>
			 </div>
			</div>
  </div>
	  <span class="hybrid-field-error">{{ errors[0] }}</span>
	 </ValidationProvider>

   <ValidationProvider
			ref="hybrid_stackversion"
			name="myVersion"
			rules="required|alpha_num_name"
			v-slot="{ errors, ariaMsg, ariaInput,   valid, invalid }"
		>
				 <div class="row">
						<div class="col-sm-12 sm-12">
						 <div class="input-group input-group-sm sm-3">
        <div class="input-group-prepend">
          <span class="input-group-text" >Service Version</span>
        </div>
							<input 
								type="text" 
								class="form-control" 
									aria-label="Small" aria-describedby="inputGroup-sizing-sm"
									v-bind:class="{'is-valid': isDeployValid.stackversion == 1, 'is-invalid': isDeployValid.stackversion == 2}"
								name="myVersion"  
								v-model="form_version"
								v-on:keyup="isValid('stackversion')"
                v-on:blur="isValid('stackversion')"
                v-on:input="isValid('stackversion')"
                v-on:change="isValid('stackversion')"
                v-on:focus="isValid('stackversion')"
							>
        <div class="input-group-prepend">
          <button
            class="ti-info btn btn-outline-secondary btn-sm"
              title="Info"
            round
            @click="onAction('form_version')">
          </button>



        </div>
						</div>
					 </div>
					</div>
	  <span class="hybrid-field-error">{{ errors[0] }}</span>
	 </ValidationProvider>

   <ValidationProvider
			ref="hybrid_stackgitrepo"
			name="myGitrepo"
			rules="required|alpha_num_url"
			v-slot="{ errors, ariaMsg, ariaInput,   valid, invalid }"
		>
 <div class="row">
    <div class="col-sm-12 sm-12">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" name="validationTooltipUsernamePrepend">Git-repo</span>
        </div>
        <input 	
					type="text" 
					class="form-control" 
				  v-model="form_gitrepo"
					name="myGitrepo" 
									v-bind:class="{'is-valid': isDeployValid.gitrepo == 1, 'is-invalid': isDeployValid.gitrepo == 2}"
					aria-describedby="validationTooltipUsernamePrepend" 
								v-on:keyup="isValid('gitrepo')"
                v-on:blur="isValid('gitrepo')"
                v-on:input="isValid('gitrepo')"
                v-on:change="isValid('gitrepo')"
                v-on:focus="isValid('gitrepo')"
				>
        <div class="input-group-prepend">
          <button
            class="ti-info btn btn-outline-secondary btn-sm"
              title="Info"
            round
            @click="onAction('form_gitrepo')">
          </button>
        </div>
      </div>
    </div>
  </div>
	  <span class="hybrid-field-error">{{ errors[0] }}</span>
	 </ValidationProvider>

 <div class="row">
    <div class="col-sm-12 sm-12">

      <div class="input-group"
				v-if="form_visibility == 'Public'"
			>
          <button
            class="btn btn-success btn-sm"
      			type="radio"
						name="options" 
    				v-model="form_visibility" 
					> 
					<span class="text-light">Public</span>
          </button>
          <button
            class="btn btn-outline-secondary btn-sm"
      			type="radio"
						name="options" 
    				v-model="form_visibility" 
            @click="onSwitch('Private')"
					> 
					<span class="text-muted">Private</span>
          </button>
      </div>

      <div class="input-group"
				v-if="form_visibility == 'Private'"
			>
          <button
            class="btn btn-outline-secondary btn-sm"
      			type="radio"
						name="options" 
    				v-model="form_visibility" 
            @click="onSwitch('Public')"
					> 
					<span class="text-muted">Public</span>
          </button>
          <button
            class="btn btn-success btn-sm"
      			type="radio"
						name="options" 
    				v-model="form_visibility" 
					> 
					<span class="text-light">Private</span>
          </button>
        <input 	
					type="text" 
					class="form-control" 
				  v-model="form_visibility_users"
          placeholder="Grant users with an account access to your Service"
					name="myGitrepo" 
					aria-describedby="validationTooltipUsernamePrepend" 
				>
        <div class="input-group-prepend">
          <button
            class="ti-info btn btn-outline-secondary btn-sm"
              title="Info"
            round
            @click="onAction('form_visibility_users')">
          </button>
        </div>
      </div>

    </div>
  </div>


    <div class="row"
      <b-col  class="text-center" cols="12" sm="12"  md="12">
        <div class="form-group">
          <button
            class=" btn btn-outline-secondary btn-sm"
              title="Info"
            round
            @click="onAction('form_readme')">
README
          </button>
          <textarea class="form-control" name="customreadme" rows="8"
				      v-model="form_readme"
          >
          {{ form_readme }}
          </textarea>
        </div>
      </b-col>
    </div>


    <div class="row"
      <b-col  class="text-center" cols="12" sm="12"  md="12">
        <div class="form-group">
          <button
            class=" btn btn-outline-secondary btn-sm"
              title="Info"
            round
            @click="onAction('form_os')">
Add Extrapackages
          </button>
          <span class="text-success">
          {{ customostext }}
          </span >
          <textarea class="form-control" name="custompackages" rows="8"
          placeholder="e.g. apt-get update && apt-get -y install or apk update && apk add --no-cache  "
				      v-model="form_os"
          >
          {{ form_os }} 
          </textarea>
        </div>
      </b-col>
    </div>

    <div class="row"
      <b-col  class="text-center" cols="12" sm="12"  md="12">
        <div class="form-group">
          <button
            class=" btn btn-outline-secondary btn-sm"
              title="Info"
            round
            @click="onAction('form_sh')">
Custom sh script
          </button>
          <span class="text-success">
          {{ customshtext }}
          </span >
          <textarea class="form-control" name="customshell" rows="8"
          placeholder="#!/bin/bash  "
				      v-model="form_sh"
          >
          {{ form_sh }}
          </textarea>
        </div>
      </b-col>
    </div>

 <div class="row">
    <div class="col-sm-12 sm-12">
        <div class="text-center">
          <button
            class="btn btn-outline-secondary btn-sm align-center"
              title="Info"
            round
            @click="onAction('port')">
Port - URI - Name 
          </button>
        </div>
     </div>
    <div class="col-sm-3 sm-3">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" name="validationTooltipUsernamePrepend">Port</span>
        </div>
        <input 	
					type="text" 
					class="form-control" 
				  v-model="form_port1"
					aria-describedby="validationTooltipUsernamePrepend" 
				>
      </div>
    </div>

    <div class="col-sm-4 sm-4">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" name="validationTooltipUsernamePrepend">URI</span>
        </div>
        <input 	
					type="text" 
					class="form-control" 
				  v-model="form_url1"
          placeholder="http/https"
					aria-describedby="validationTooltipUsernamePrepend" 
				>
      </div>
    </div>

    <div class="col-sm-5 sm-5">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" name="validationTooltipUsernamePrepend1a">Name</span>
        </div>
        <input 	
					type="text" 
					class="form-control" 
				  v-model="form_name1"
					aria-describedby="validationTooltipUsernamePrepend1a" 
				>
      </div>
    </div>

  </div>

 <div class="row">
    <div class="col-sm-3 sm-3">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" name="validationTooltipUsernamePrepend2">Port</span>
        </div>
        <input 	
					type="text" 
					class="form-control" 
				  v-model="form_port2"
					aria-describedby="validationTooltipUsernamePrepend2" 
				>
      </div>
    </div>


    <div class="col-sm-4 sm-4">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" name="validationTooltipUsernamePrepend">URI</span>
        </div>
        <input 	
					type="text" 
					class="form-control" 
				  v-model="form_url2"
          placeholder="http/https"
					aria-describedby="validationTooltipUsernamePrepend" 
				>
      </div>
    </div>

    <div class="col-sm-5 sm-5">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" name="validationTooltipUsernamePrepend2a">Name</span>
        </div>
        <input 	
					type="text" 
					class="form-control" 
				  v-model="form_name2"
					aria-describedby="validationTooltipUsernamePrepend2a" 
				>
      </div>
    </div>

  </div>

 <div class="row">
    <div class="col-sm-3 sm-3">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" name="validationTooltipUsernamePrepend3">Port</span>
        </div>
        <input 	
					type="text" 
					class="form-control" 
				  v-model="form_port3"
					aria-describedby="validationTooltipUsernamePrepend2" 
				>
      </div>
    </div>

    <div class="col-sm-4 sm-4">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" name="validationTooltipUsernamePrepend">URI</span>
        </div>
        <input 	
					type="text" 
					class="form-control" 
				  v-model="form_url3"
          placeholder="http/https"
					aria-describedby="validationTooltipUsernamePrepend" 
				>
      </div>
    </div>

    <div class="col-sm-5 sm-5">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" name="validationTooltipUsernamePrepend3a">Name</span>
        </div>
        <input 	
					type="text" 
					class="form-control" 
				  v-model="form_name3"
					aria-describedby="validationTooltipUsernamePrepend3a" 
				>
      </div>
    </div>

  </div>

<br>
    <div class="row"
      <b-col  class="text-center" cols="12" sm="12"  md="12">
        <div class="form-group">
          <button
            class=" btn btn-outline-secondary btn-sm"
              title="Info"
            round
            @click="onAction('form_rclocal')">
rc.local
          </button>
          <span class="text-success">
          {{ customshtext }}
          </span >
          <textarea class="form-control" name="rclocal" rows="8"
				      v-model="form_rclocal"
          >
          {{ form_rclocal }}
          </textarea>
        </div>
      </b-col>
    </div>

 <div class="row">
    <div class="col-sm-12 sm-12 float-right">
  			<button 
          class="btn btn-outline-info  btn-sm float-right"
					type="submit"
					@click="save"
				>Save Microservice</button>
  			<button 
          class="btn btn-outline-warning  btn-sm float-right"
					type="submit"
					@click="cancel"
				>Cancel</button>
    </div>
  </div>


      </b-container>
  </card>
</template>
<script>
import store from '@/store/index'
import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
import Vue from 'vue'
import card from '@/components/Card.vue'
import {ApiConfig} from "@/config/index";
import { ValidationObserver, ValidationProvider, extend } from 'vee-validate';
//import { extend } from 'vee-validate';
import { required, alpha_num } from 'vee-validate/dist/rules';

// No message specified.
extend('alpha_num', alpha_num);

// Override the default message.
extend('required', {
  ...required,
  message: 'This field is required'
});


extend('alpha_num_name', value => {
 var regex = new RegExp(/^[A-Za-z0-9]+$/, 'i');
  if(regex.test(value)){
    return true;
  }
  return 'The {_field_} field may contain alphabetic characters and numbers'
});

extend('alpha_num_url', value => {
// var regex = new RegExp(/^[A-Za-z0-9]+$/, 'i');
 var regex = new RegExp(/^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z0-9\u00a1-\uffff][a-z0-9\u00a1-\uffff_-]{0,62})?[a-z0-9\u00a1-\uffff]\.)+(?:[a-z\u00a1-\uffff]{2,}\.?))(?::\d{2,5})?(?:[/?#]\S*)?$/, 'i');
  if(regex.test(value)){
    return true;
  }
  return 'The {_field_} field may contain Valid url'
});



export default {
  components: {
      ValidationProvider,
      card
	},
  props: {
  },
  data() {
   return{
    customostext: '',
    customshtext: '',
    menou: false,
     custom: {
			'os':'',
			'sh':'',
     },
     customserviceall: [],
			'form_baseservice':'',
			'form_myservicename':'',
			'form_os':'',
			'form_sh':'',
      'form_readme': '',
			'form_version':'',
			'form_rclocal':'',
      'form_url1':'',
      'form_url2':'',
      'form_url3':'',
			'form_port1':'',
			'form_name1':'',
			'form_port2':'',
			'form_name2':'',
			'form_port3':'',
			'form_name3':'',
			'form_gitrepo':'',
			'form_visibility':'Public',
			'form_visibility_users':'',
     customservice: {
			'myservicename':'',
			'os':'',
			'sh':'',
      'readme': '',
			'microservice':'',
			'version':'',
			'rclocal':'',
      'url1':'',
      'url2':'',
      'url3':'',
			'port1':'',
			'name1':'',
			'port2':'',
			'name2':'',
			'port3':'',
			'name3':'',
			'gitrepo':''
     },
     addNetworkMenou:false,
     issocket:'close',
    isDeployValid:{
      "stackname":3,
      "stackversion":3,
      "gitrepo":3
      },
    isDeployError:{
      },
  			selected: 1,
        menouselect: false,
        options: [
         {"value":99999,"text":"Please select an option"}
        ]
		}
  },
  beforeMount () {
  },
	mounted() {
		this.$root.$on('hybrid_build_micro_service_menou', ()  => {
			this.menou = false
      //console.log('false')
    })
		this.$root.$on('hybrid_build_micro_service', (service) => {
      console.log(service)
      this.setserviceform2null()
			this.menou = true
			this.myservicename = {}
			this.customserviceall = []
			this.options = []
			this.customservice = {}
      this.menouselect = false
			this.customservice.microservice = service.data.swarmlabname	
			this.form_baseservice = service.data.swarmlabname	
      this.form_visibility	    =	'Public'
/*
      if( service.log.hasOwnProperty('data')){
      	if( service.log.data.hasOwnProperty('data')){
           if(service.log.data.data){
              //const cc = service.log.data.data.filter(item => item.service === '0').length; 
              var cc = Object.keys(service.log.data.data).length;
              if(cc > 0){
                if(cc > 1){
                	this.menouselect = true
								}
              	cc--
							}
                //console.log(cc)
							this.customservice.myservicename	= service.log.data.data[cc].service
							this.customservice.baseservice		=	service.log.data.data[cc].baseservice
							this.customservice.visibility		  =	'Public'
							this.customservice.sh							= service.log.data.data[cc].sh
							this.customservice.os							= service.log.data.data[cc].packages
							this.customservice.readme					= service.log.data.data[cc].readme
							this.customservice.gitrepo				= service.log.data.data[cc].gitrepo
							this.customservice.version				= service.log.data.data[cc].serviceversion
							this.customservice.rclocal				= service.log.data.data[cc].rclocal

							this.customservice.url1    			  = service.log.data.data[cc].url1
							this.customservice.url2    			  = service.log.data.data[cc].url2
							this.customservice.url3    			  = service.log.data.data[cc].url3
							this.customservice.port1    			= service.log.data.data[cc].port1
							this.customservice.name1    			= service.log.data.data[cc].name1
							this.customservice.port2    			= service.log.data.data[cc].port2
							this.customservice.name2    			= service.log.data.data[cc].name2
							this.customservice.port3    			= service.log.data.data[cc].port3
							this.customservice.name3    			= service.log.data.data[cc].name3
              this.setserviceform(this.customservice) 

							for (let i = 0; i <= cc; i++) {
								  let option = { 
									  value: i,
									  text: service.log.data.data[i].service
                  }
                  Vue.set(this.options, i, option)
                  this.selected = i
							}
							this.customserviceall				= service.log.data.data
                //console.log('customall2 '+ JSON.stringify(this.customservice.myservicename))
                //console.log('customall1 '+ JSON.stringify(service.log.data.data[cc]))
                //console.log('customall '+ JSON.stringify(this.customserviceall))
						}
      	}
      }
         this.selected++
         var vtmp1 = {"value":this.selected,"text":"Please select an option"}
         Vue.set(this.options, this.selected, vtmp1)
                //console.log('options '+ JSON.stringify(this.options))
*/

		})

		this.$root.$on('hybrid_build_micro_myservice', (service) => {
      console.log(service)
			this.menou = true
			this.myservicename = {}
			this.customserviceall = []
			this.customservice = {}
      this.menouselect = false
			this.customservice.microservice = service.data.swarmlabname	

      if( service.log.hasOwnProperty('data')){
      	if( service.log.data.hasOwnProperty('data')){
           if(service.log.data.data){
							this.customservice.myservicename	= service.log.data.data.service
							this.customservice.baseservice		=	service.log.data.data.baseservice
							this.customservice.visibility		  =	service.log.data.data.visibility
							this.customservice.visibility_users		  =	service.log.data.data.visibility_users
							this.customservice.sh							= service.log.data.data.sh
							this.customservice.os							= service.log.data.data.packages
							this.customservice.readme					= service.log.data.data.readme
							this.customservice.gitrepo				= service.log.data.data.gitrepo
							this.customservice.version				= service.log.data.data.serviceversion
							this.customservice.rclocal				= service.log.data.data.rclocal

							this.customservice.url1    			  = service.log.data.data.url1
							this.customservice.url2    			  = service.log.data.data.url2
							this.customservice.url3    			  = service.log.data.data.url3
							this.customservice.port1    			= service.log.data.data.port1
							this.customservice.name1    			= service.log.data.data.name1
							this.customservice.port2    			= service.log.data.data.port2
							this.customservice.name2    			= service.log.data.data.name2
							this.customservice.port3    			= service.log.data.data.port3
							this.customservice.name3    			= service.log.data.data.name3
              this.setserviceform(this.customservice) 
						}
      	}
      }

		})
	},
	created() {
    var url_string = window.location.href
    var url = new URL(url_string);
    this.token = url.searchParams.get("token");
      var log = store.dispatch("pipelineLLO/settoken",{
        token:this.token
      })

	},
    beforeDestroy () {
			this.$root.$off('hybrid_build_micro_service')
			this.$root.$off('hybrid_build_micro_myservice')
			this.$root.$off('hybrid_build_micro_service_menou')
 },
  computed: {
		httpOptions() {
			var token = this.token
			    var p="headers: {Authorization: token}}"; //table props -> :http-options="httpOptions"
			    return {headers: {Authorization: 'Bearer ' + token}} //table props -> :http-options="httpOptions"
	  },

	},

  methods: {
    async onSwitch(value) {
		 console.log(value)
	   this.form_visibility = value			
    },
    async onAction(value) {
      //console.log(value)
      var infotxt = ''
      var info='<h5></h5>'
      if(value == "form_myservicename"){
        info='<h5 class="text-info">Service Name</h5>'
        infotxt += `The base image you wish to use. 
<br>
<br>
Here you should select the one closest to your final product to minimize the changes you will have to make.
        `
      }else if(value == "form_version"){
        info='<h5 class="text-info">Service Version</h5>'
        infotxt += `
              The field may contain alphanumeric characters to describe the service Name
        `
      }else if(value == "form_baseservice"){
        info='<h5 class="text-info">Swarmlab Build reference</h5>'
        infotxt += `<div class="container-fluid">
<div class="overflow-auto"  style="height: 500px;">

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1 text-info ">Base Service Name</h5>
      <small class="text-muted">required field</small>
    </div>
    <p class="mb-1 text-left text-muted">
<em>
The base image you wish to use. 
<br>
Here you should select the one closest to your final product to minimize the changes you will have to make.
</em>
		</p>
    <small class="text-muted">
    Field may contain alphanumeric characters
		</small>
  </a>
</div>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1 text-info ">Service Name</h5>
      <small class="text-muted">required field</small>
    </div>
    <p class="mb-1 text-left text-muted">
      The field may contain alphanumeric characters to describe the service Name
      <br>
      e.g. pythonscipy

		</p>
    <small class="text-muted">
			Field may contain alphabetic characters and numbers

		</small>
  </a>
</div>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1 text-info ">Service Version</h5>
      <small class="text-muted">required field</small>
    </div>
    <p class="mb-1 text-left text-muted">
      The field may contain alphanumeric characters to describe the service version
		</p>
    <small class="text-muted">
			Field may contain alphabetic characters and numbers 
   </small>
  </a>
</div>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1 text-info ">Git Repo </h5>
      <small class="text-muted">required field</small>
    </div>
    <p class="mb-1 text-left text-muted">
      This is the git repository associated with your project. Here you can upload all the necessary files for your service.
      <br>
      <b>for example </b>
<ul>
	<li>
       if you are performing a task for a tutor you might want to include filed needed to run it
	</li>
	<li>
       or if the projects is shared between multiple students you will have to include the files for everyone to use
	</li>
</ul>
      <br>
This way we have a centralized store for our projectss files


		</p>
    <small class="text-muted">
			Field may contain a valid URL
		</small>
  </a>
</div>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1 text-info ">README</h5>
      <small class="text-muted">Optional</small>
    </div>
    <p class="mb-1 text-left text-muted">
      Build Description: a simple description of the services provided
		</p>
    <small class="text-muted">
			Text
		</small>
  </a>
</div>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1 text-info ">Add Extrapackages</h5>
      <small class="text-muted">Optional </small>
    </div>
    <p class="mb-1 text-left text-muted">
<em>
        sh script to install packages

				<br> 
      <br>
        <span class="align-center"><b>Examples</b></span>
        <br>
        apt update && apt install -y vim
        <br>
        OR
        <br>
        apk update && apk add --no-cache vim
        <br>
      <br>
        The file needs to contain the commands in ONE LINE!

</em>
		</p>
    <small class="text-muted">
			apt-get, apk etc 
		</small>
  </a>
</div>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1 text-info ">Custom sh script </h5>
      <small class="text-muted">Optional</small>
    </div>
    <p class="mb-1 text-left text-muted">
A script intended to be run after the installation is done to automate system update, extra software installation and configuration. 

<br>
      <br>
It is executed after "add packages" step has finished
<br>
      <br>

Here you can make changes or install other software for example programs that cannot be found using the package manager


		</p>
    <small class="text-muted">
			sh script
		</small>
  </a>
</div>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1 text-info ">Port - URI - Name  </h5>
      <small class="text-muted">Optional</small>
    </div>
    <p class="mb-1 text-left text-muted">

Here you can declare the services you wish to start and publish.

<br>
<br>

<b>Published ports</b>:
By default, when you create or run a container, it does not publish any of its ports to the outside world.
<br>
To make a port available to services outside of Docker, or to Docker containers which are not connected to the container’s network, use the "Port" field. 
		</p>
    <p class="mb-1 text-left text-muted">
				<b>URI</b>: http/https
		</p>
    <p class="mb-1 text-left text-muted">
				<b>Name</b>: 
        this is the name used by the end user. <b> Try to be clear using few words!</b>

		</p>
    <small class="text-muted">
		UDP Port:	add <b>/udp</b> suffix to the port number
		</small>
  </a>
</div>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1 text-info ">rc.local</h5>
      <small class="text-muted">Optional</small>
    </div>
    <p class="mb-1 text-left text-muted">

Here you may start additional services. Please keep in mind that they WILL NOT be started automatically! You HAVE to start them here!

<br>
<br>
It is executed after all build processes are finished.
		</p>
    <small class="text-muted">
			sh script 
		</small>
  </a>
</div>



</div>
</div>
        
        
        `
      }else if(value == "form_gitrepo"){
        info='<h5 class="text-info">Git-repo</h5>'
        infotxt += `
<div class="text-left">
      This is the git repository associated with your project. 
      <br>
Here you can upload all the necessary files for your service.
      <br>
      <br>
      <b>for example </b>
<ul>
	<li>
       if you are performing a task for a tutor you might want to include filed needed to run it
	</li>
	<li>
       or if the projects is shared between multiple students you will have to include the files for everyone to use
	</li>
</ul>
      <br>
      <br>
This way we have a centralized store for our projectss files
</div>
        `
      }else if(value == "form_rclocal"){
        info='<h5 class="text-info">rc.local</h5>'
        infotxt += `

    <p class="mb-1 text-left text-muted">

Here you may start additional services. 
<br>
<br>
Please keep in mind that they WILL NOT be started automatically! You HAVE to start them here!

<br>
<br>
It is executed after all build processes are finished.
		</p>
    <small class="text-muted">
			sh script 
		</small>
  
`
      }else if(value == "form_sh"){
        info='<h5 class="text-info">Custom sh script </h5>'
        infotxt += `

    <p class="mb-1 text-left text-muted">
A script intended to be run after the installation is done to automate system update, extra software installation and configuration. 

<br>
<br>
It is executed after "add packages" step has finished
<br>
<br>

Here you can make changes or install other software for example programs that cannot be found using the package manager


		</p>
    <small class="text-muted">
			sh script
		</small>
  
`
      }else if(value == "form_visibility_users"){
        info=`<h5 class="text-info"> Grant users access to your Service </h5>
        please add the email addresses of the users you would like to invite separated with comas 
<br>
        <br><b>Examples</b>
        <br>
         user1@email.com,user2@foo.com
        <br>
        <br>
        <span class="text-warning"> NOTE </span>
        <br>
        <p>
         swarmlab.io uses GitHub as an Identity Provider
         <br>
         <br>
         To avoid further naming issues swarmlab uses the <b>email used with the oauth provider</b> as the  identification key.
        <br>
        <br>
        <i> This ensures that multiple accounts with different providers and the same name won't be messed up within swarmlab</i>
        </p>
        `
      }else if(value == "form_os"){
        info='<h5 class="text-info">Add Extrapackages </h5>'
        infotxt += `

    <p class="mb-1 text-left text-muted">
<em>
        sh script to install packages

				<br> 
        <br>
        <span class="align-center"><b>Examples</b></span>
        <br>
        apt update &amp;&amp; apt install -y vim
        <br>
        OR
        <br>
        apk update &amp;&amp; apk add --no-cache vim
        <br>
        <br>
        The file needs to contain the commands in ONE LINE!

</em>
		</p>
    <small class="text-muted">
			apt-get, apk etc 
		</small>
  


        <br>
        <a href="https://wiki.alpinelinux.org/wiki/Package_management" target="_blank">Info</a>
        `
      }else if(value == "form_readme"){
        info='<h5 class="text-info">README</h5>'
        infotxt += `
      Build Description: a simple description of the services provided
`
      }else if(value == "port"){
        info='<h5 class="text-info">Port -  URI - Name </h5>'
        infotxt += `
       
    <p class="mb-1 text-left text-muted">

Here you can declare the services you wish to start and publish.

<br>
<br>

<b>Published ports</b>:
By default, when you create or run a container, it does not publish any of its ports to the outside world.
<br>
To make a port available to services outside of Docker, or to Docker containers which are not connected to the container’s network, use the "Port" field. 
		</p>
<br>
    <p class="mb-1 text-left text-muted">
				<b>URI</b>: http/https
		</p>
<br>
    <p class="mb-1 text-left text-muted">
				<b>Name</b>: 
        this is the name used by the end user. <b>  Try to be clear using few words!</b>

		</p>
<br>
    <small class="text-muted">
		UDP Port:	add <b>/udp</b> suffix to the port number
		</small>
   
        `
      }

                info += infotxt
                this.$swal({
                  html: info,
                  icon: 'info',
                  showCloseButton: true,
                  showLoaderOnConfirm: false,
                  allowOutsideClick: false,
                  showLoaderOnConfirm: false,
                  reverseButtons: true,
                  focusCancel: true
                })
    },
    async save() {
     (async () => {
          var isAllValid = true
          for (const [key, value] of Object.entries(this.isDeployValid)) {
            //console.log(`${key}: ${value}`);
            if(value != 1){
              isAllValid = false
            }
          }
 				if(isAllValid){
						
              var log = await store.dispatch("pipelineLLO/addmycustomservice",{
                token:this.token,
								service:        this.form_myservicename,
								readme:         this.form_readme,
								baseservice:    this.form_baseservice,
								visibility:     this.form_visibility,
								visibility_users:     this.form_visibility_users,
								sh:             this.form_sh,
								packages:       this.form_os,
								gitrepo:        this.form_gitrepo,
								serviceversion: this.form_version,
								rclocal:        this.form_rclocal,
								url1:           this.form_url1,
								url2:           this.form_url2,
								url3:           this.form_url3,
								port1:          this.form_port1,
								name1:          this.form_name1,
								port2:          this.form_port2,
								name2:          this.form_name2,
								port3:          this.form_port3,
								name3:          this.form_name3
              })
            //  this.$root.$emit('hybrid_refresh_bootstrap_view')
            //  this.$root.$emit('hybrid_refresh_bootstrap_view')
						
    	  			//console.log(this.customservice);
    	  			//console.log(log);
              if(log.data.action == 'ok'){
                  var info = "Your upload was successful!"
                  this.$swal({
                    type: 'Info',
                    title: 'Info!',
                    icon:'info',
                    html: info,
                    showCloseButton: true,
                    showLoaderOnConfirm: false,
                    allowOutsideClick: false,
                    cancelButtonText: 'No, cancel!',
                    showCancelButton: false,
                    showLoaderOnConfirm: false,
                    reverseButtons: true,
                    focusCancel: true,
                    confirmButtonText: 'Ok!'
                  })
              this.$root.$emit('hybrid_build_micro_service_menou_refreshtable')

              }else{
                  var info = "Service upload error "
                  this.$swal({
                    type: 'Info',
                    title: 'Info!',
                    icon:'error',
                    html: info,
                    showCloseButton: true,
                    showLoaderOnConfirm: false,
                    allowOutsideClick: false,
                    cancelButtonText: 'No, cancel!',
                    showCancelButton: false,
                    showLoaderOnConfirm: false,
                    reverseButtons: true,
                    focusCancel: true,
                    confirmButtonText: 'Ok!'
                  })
              }
          }else{
              var info = "Missing required fields"
              this.$swal({
                type: 'Info',
                title: 'Info!',
                icon:'info',
                html: info,
                showCloseButton: true,
                showLoaderOnConfirm: false,
                allowOutsideClick: false,
                cancelButtonText: 'No, cancel!',
                showCancelButton: false,
                showLoaderOnConfirm: false,
                reverseButtons: true,
                focusCancel: true,
                confirmButtonText: 'Ok!'
              })

         }
      })();

		},
    cancel() {
    	//console.log('cancel');
			this.menou = false
		},
    setserviceform(data) {
      this.form_myservicename	  = data.myservicename
      this.form_baseservice			=	data.baseservice
      this.form_visibility	    =	data.visibility
			this.form_visibility_users= data.visibility_users
      this.form_sh							= data.sh
      this.form_os							= data.os
      this.form_readme					= data.readme
      this.form_gitrepo				  = data.gitrepo
      this.form_version				  = data.version
      this.form_rclocal				  = data.rclocal

      this.form_url1    			  = data.url1
      this.form_url2    			  = data.url2
      this.form_url3    			  = data.url3
      this.form_port1    			  = data.port1
      this.form_name1    			  = data.name1
      this.form_port2    			  = data.port2
      this.form_name2    			  = data.name2
      this.form_port3    			  = data.port3
      this.form_name3    			  = data.name3
      //console.log(data)
      //console.log(data.myservicename)
      //console.log(this.form_myservicename)
		},
    setserviceform2null() {
      this.form_myservicename	  = '' 
      this.form_baseservice			= ''	
      this.form_sh							= '' 
      this.form_os							= '' 
      this.form_readme					= '' 
      this.form_gitrepo				  = '' 
      this.form_version				  = '' 
      this.form_rclocal				  = '' 

      this.form_url1    			  = '' 
      this.form_url2    			  = '' 
      this.form_url3    			  = '' 
      this.form_port1    			  = '' 
      this.form_name1    			  = '' 
      this.form_port2    			  = '' 
      this.form_name2    			  = '' 
      this.form_port3    			  = '' 
      this.form_name3    			  = '' 
      //console.log('refresh')
      //console.log(data.myservicename)
      //console.log(this.form_myservicename)
		},
    setservice() {
    	//console.log(this.selected);
    	var cc = this.selected
      //console.log('sel '+ JSON.stringify(this.customserviceall[cc]))

      this.customservice.myservicename	= this.customserviceall[cc].service

      this.customservice.baseservice		=	this.customserviceall[cc].baseservice
      this.customservice.visibility		  =	this.customserviceall[cc].visibility
      this.customservice.sh							= this.customserviceall[cc].sh
      this.customservice.os							= this.customserviceall[cc].packages
      this.customservice.readme					= this.customserviceall[cc].readme
      this.customservice.gitrepo				= this.customserviceall[cc].gitrepo
      this.customservice.version				= this.customserviceall[cc].serviceversion
      this.customservice.rclocal				= this.customserviceall[cc].rclocal

      this.customservice.url1    			  = this.customserviceall[cc].url1
      this.customservice.url2    			  = this.customserviceall[cc].url2
      this.customservice.url3    			  = this.customserviceall[cc].url3
      this.customservice.port1    			= this.customserviceall[cc].port1
      this.customservice.name1    			= this.customserviceall[cc].name1
      this.customservice.port2    			= this.customserviceall[cc].port2
      this.customservice.name2    			= this.customserviceall[cc].name2
      this.customservice.port3    			= this.customserviceall[cc].port3
      this.customservice.name3    			= this.customserviceall[cc].name3

      //this.customservice.readme	= 'xxxxxxxxxxxxxxxxxx'
      //Vue.set(this.customservice, 'readme', 'xxxxxxxxxxxxxxxxxxxxxxxxx' )
      //console.log('sel1 '+ JSON.stringify(this.customservice))
      this.setserviceform(this.customservice) 
		},
   async isValid(f){

     if(f == 'stackname'){
        var field = await this.$refs.hybrid_stackname.validate();
        if(field.valid == true){
          this.isDeployValid.stackname = 1
        }else{
          this.isDeployValid.stackname = 2
        }
     }
     else if(f == 'stackversion'){
        var field = await this.$refs.hybrid_stackversion.validate();
        if(field.valid == true){
          this.isDeployValid.stackversion = 1
        }else{
          this.isDeployValid.stackversion = 2
        }
     }
     else if(f == 'gitrepo'){
        var field = await this.$refs.hybrid_stackgitrepo.validate();
        if(field.valid == true){
          this.isDeployValid.gitrepo = 1
        }else{
          this.isDeployValid.gitrepo = 2
        }
     }
 }





  },

  actions: {

	}

};
</script>

<style lang="scss">


.switchsecondary {
  background: var(--secondary);
  color: #fff;
}









.flex-fixed-width-item {
    flex: 0 0 100px;
		}
.modalinfo {
  z-index: 10000000 !important;
	position:fixed;
}
/* a container with flex-direction column */

.vue-notifyjs.notifications{
  .alert{
   z-index: 100;
  }
  .list-move {
    transition: transform 0.3s, opacity 0.4s;
  }
  .list-item {
    display: inline-block;
    margin-right: 10px;

  }
  .list-enter-active {
    transition: transform 0.2s ease-in, opacity 0.4s ease-in;
  }
  .list-leave-active {
    transition: transform 1s ease-out, opacity 0.4s ease-out;
  }

  .list-enter {
    opacity: 0;
    transform: scale(1.1);

  }
  .list-leave-to {
    opacity: 0;
    transform: scale(1.2, 0.7);
  }
}

pre {
  //background-color: rgb(255, 247, 229);
  background-color: #eff0f1;
	  border: 1px solid blue;
		  //white-space: pre-line;
			}


</style>
