const ProfilRouter = {
    template: `
<div>
	<div v-if="isAuthentified">
		<ProfilCard
			v-for="(profil, index) in profilcard"
			:key="profil.id"
			:profil="profil"
		></ProfilCard>
		<button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="logOut() ">Logout</button>
	</div>
	<div v-else-if="!isAuthentified">
		<button v-on:click="showLoginModal=true" @clicked="logIn">Login</button>
	 	<v-rating v-model="rating"></v-rating>
		<login-panel v-if="showLoginModal" @clicked="closeModal" ></login-panel>
	</div>
</div>`,
    data: function () {
        return {
			profilcard: _profilcard,
			showLoginModal: false,
			isAuthentified: false,
			rating: 3,
			};
    },
    methods: {
		closeModal (value) {
			this.showLoginModal = value;
			this.isAuthentified = !this.isAuthentified;
        },

		logIn (value) {
			this.showLoginModal=false;
        },

		logOut () {
			this.isAuthentified=false;
        },
    },
};


/*
$('#myModal').on('show.bs.modal', function (event) {
  console.log("Modal Opened")
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})
*/